Elemente werden abgeschnitten bei kleiner auflösung

corny123

Hallo Leute!
Ich bin absoluter anfänger mit html und css und versuche mir eine kleine und einfache webseite zu erstellen. Das Problem ist jetzt, wenn ich meine Auflösung verkleinere werden, je nach dem wie klein ich das Browserfenster ziehe, Elemente rechts und links abgeschnitten... Auf meiner Standardauflösung funktioniert alles bestens...
Wie kann ich das Problem beheben, sodass z.b. scrollbalken da sind, die rechts und links alles sichtbar machen können..
Ich hoffe ihr versteht mein Problem..
mfg

Bandit

Stelle die Seite, falls noch nicht geschehen, online und poste einen Link, damit wir uns das ansehen können.

Falls du noch keinen Webspace hast, suche dir einen Freehoster, den du für solche Zwecke nutzen kannst.

corny123

hi, danke, dass das so schnell ging!

ich bin zwar noch relativ am anfang aber ich möchte dieses darstellungsproblem jetzt beheben bevor es später zu schwer wird
so sollte die seite bis jetzt aussehen im vollbild (abgesehen dass unten noch bisschen weiss ist!)

bitte zerreißt mich nicht, ich habe wie gesagt keine erfahrung damit!
dankeschön schonmal

corny123

niemand?

edit: wenn ich meinen "Content" mit width 70% festlege sieht das ganze schon viel besser aus aber halt nicht so wie ich das will^^

djheke

Bin mir nicht sicher ob du es so möchtest. Einfach mal kopieren und testen.

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title> Titel</title>


<style type="text/css">


* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 border:none;
}




#wrapper {
 max-width:60em;
 min-width:760px;
 min-height:100%;
 margin:0 auto;
}


#kopf {
 text-align: center;
 font-style:oblique;
 font-size: 1.2em;
 letter-spacing: 0.5em;
 word-spacing: 2em;
 height: 150px;
 line-height:10em;
 background: url(headerverlauf.jpg) no-repeat lightblue;
 color: orange;
}


#navi {
 max-width:60em;
 min-width:760px;
 text-align:center;
 background:#ccc;
 padding:5px;
}


#navi li {
 list-style: none;
 display: inline;
 font-size: xx-large;
 font-family: monospace;
 font-weight: bold;
 padding:5px;
}


#navi li a:hover {
 color:red
}


#navi li a {
 color: white;
 margin-right:60px;
}






#links {
 float: left;
 width:33.3%;
 min-height: 500px;
 background-color: green;
}


#content  {
 float:left;
 width:66.6%;
 min-height: 500px;
 background:url(content.jpg) #ddd;
} 


#fuss {
 clear:left;
 text-align: center;
 background: #8B8878;
}


    
</style>


</head>
<body>
 <div id="wrapper">
  <div id="kopf"> <h1>Ein Titel</h1></div>


  <div id="navi">
  <ul>
  <li><a href="http://www.google.de">HOME</a>  </li>
  <li><a href="http://www.google.de">SEITE 2</a>  </li>
  <li><a href="http://www.google.de">SEITE3</a>  </li>
  <li><a href="http://www.google.de">Kontakt</a>  </li>
  </ul>
 </div>


 <div id="links"> 
   Weiterf&uuml;hrende Links. 
  </div>
  <div id="content">
   Inhalt
  </div>
 <div id="fuss"> 
  Hier kommt mal das Impressum hin! 
 </div>


</div>


</body>
</html>

Alles anzeigen

corny123

hmm, ne nicht so ganz:
die weiterführenden links sollten nach rechts und der inhaltsdiv links., bei dir ist das genau umgekehrt
bei mir im browser ist links und rechts viel frei (also weisser rand), kann man das irgendwie füllen?
aber wenn ich das bei mir halt klein machen , so auf 10x10cm kann ich halt schon nach links und rechts scrollen, es wird nix abgeschnitten, das brauche ich bei mir^^
danke schonma für deine hilfe

djheke

Na gut, weil dein Grunglagenwissen fehlt. Die max. Breite kannst du ja noch anpassen. Übrigens 1em sind ca. 16px.
Hier die Änderungen

Code

#content {
 float: left;
 width:66.6%;
 min-height: 500px;
 background-color: green;
}


#links  {
 float:left;
 width:33.3%;
 min-height: 500px;
 background:url(content.jpg) #ddd;
}

Alles anzeigen

HTML

Code

<div id="content">
   Inhalt
  </div>
<div id="links"> 
   Weiterf&uuml;hrende Links. 
  </div>

Nochwas. Warum willst du deine Besucher nötigen horizontal zu scrollen?

corny123

hmm, weil wenn die seite halt klein gezogen wird, ist die navigation nicht mehr nebeneinander, sondern verteilt sich auf 2 zeilen, dem wollte/will ich entgegen wirken
ich hatte ja am anfang den "content" auf 1350px gesetzt, das war der fehler, ich hatte den dann ja auf 70% gesetzt und dann lief das halt, bis auf das horizontale scrollen.
wieso machst du den "links-container" float: left;? das funktioniert bei mir auch ohne
ist es nötig min-height zu setzen und nicht nur height, wie ich das zuvor hatte? bei mir hat das auch funktioniert ohne min-height

edit: so sieht das jetzt nur mit der änderung von der fixen px width auf 70% aus

du siehst ja wenn das fenster klein wird wird aus einer navigationsleiste -> 2 Zeilen
das will ich mit dem horizon. scrollen verhindern.

djheke

Ist aber sehr unflexibel. Naja wirst es schon machen.
Hier noch etwas Lesestoff. Wenn Interesse beseht.http://little-boxes.de/little-boxes-teil1-online.html

corny123

okay danke

corny123

hallo nochmal, eine frage hätte ich noch.
kann man in html eine alternative definieren für spezielle browser? Also das ein bestimmtes tag nur in dem oder dem Browser verwendet wird und in anderen browser nicht angezeigt wird? oder geht das nur mit JS?

Bandit

Guckst du: http://de.selfhtml.org/css/layouts/browserweichen.htm

Tags