✔ Design schlicht

Status
Nicht offen für weitere Antworten.
M

Malaxo

Erfahrenes Mitglied
Kriegs nicht hin.......

Kann mir dies kurz einer zeigen?

Ziel:
Body margin 20px

Dannach den Banner Breite 100% (darf aber nicht den Rahmen vom Body 20px überschreitten)

UBanner Breite 100% (gleich unter dem Banner)

Menu Breite 100px (unter UBanner links höhe passt sich dem Content an)
Content Breite Rest (unter UBanner rechts neben dem Menu)

Bottom höhe 20px unter Menu + Content, Breite 100%
 

Anhänge

  • 26168attachment.jpg
    26168attachment.jpg
    12,8 KB · Aufrufe: 17
Ich hänge meinen Lösungsvorschlag als ZIP-Datei an, da in dem Modell eine Hintergrundgrafik zum Einsatz kommt, damit die beiden Spalten (Menü + Content) immer gleich hoch sind.
 

Anhänge

dmn... warum ist mir das nicht eingefallen mit dem Hintergrundbild...


THX ... das ist Top so wollte ich es, jetzt kann ich weiter üben :suspekt:
 
Hab fest gestellt, dass wenn der Text im Content zu lang ist es keinen Zeilenumbruch macht und den Text in das Menu hinein schiebt. Beim IE gehts hab ich gerade gesehen. FF nicht

Hab dem Content white-space: normal; angehängt nütz nichts.

Wie kann man das beheben?
Hatte dieses Problem schon öffters :S

noch ein bischen CSS für euch (design nicht beachten wegen den Farben dies ist nur zur übung so):

Code: 
* {
	border: 0;
	margin: 0;
	padding: 0;
}

body {
	margin: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div#mainbox {
	border: 1px solid #000000;
}

div#banner{
	height: 60px;
	background: #999999;
	padding-top: 20px;
	padding-left: 20px;
}

div#wrapp{
	background: url(bgimage.png) repeat-y #CCCCCC;
}

div#navi {
	width: 110px;
	float: left;
	padding-bottom: 10px;
}

div#content {
	float: left;
	padding: 20px;
	white-space: normal;
}

div#clear {
	clear: left;
	height: 0;
	line-height: 0;
	margin: 0;
	padding: 0;
	font-size: 1px;
}

div#bottom {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
	padding-top: 10px;
	color: #FFFFFF;
	height: 20px;
	background: #00CCFF;
}
 

Anhänge

  • 26255attachment.png
    26255attachment.png
    29,8 KB · Aufrufe: 20
Zuletzt bearbeitet:
Hier der überarbeitete CSS- und HTML-Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
* {
        border: 0;
        margin: 0;
        padding: 0;
}

body {
        margin: 20px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
}

div#mainbox {
        border: 1px solid #000000;
}

div#banner{
        height: 60px;
        background: #999999;
        padding-top: 20px;
        padding-left: 20px;
}

div#wrapp{
        background: url(bgimage.png) repeat-y #CCCCCC;
        height: 1%;
}

div#navi {
        width: 110px;
        float: left;
        padding-bottom: 10px;
}

div#content {
        float: left;
        padding: 20px;
        margin-left: 110px !important; /* Für nicht-IE-Browser */
        margin-left: 0; /* Für IE */
}

div#clear {
        clear: left;
        height: 0;
        line-height: 0;
        margin: 0;
        padding: 0;
        font-size: 1px;
}

div#bottom {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-align: center;
        padding-top: 10px;
        color: #FFFFFF;
        height: 20px;
        background: #00CCFF;
}
-->
</style>

</head>
<body>

<div id="mainbox">
     <div id="banner">banner</div>
     <div id="wrapp">
          <div id="navi">menu<br>menu</div>
          <div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content -END-</div>
          <div id="clear">&nbsp;</div>
     </div>
     <div id="bottom">bottom</div>
</div>

</body>
</html>
 
So weit so gut...

Jetzt müsste der Content Text jedoch auf gleicher höhe sein wie der Menu Text momentan ist er zwar auf der richtigen Seite jedoch nicht auf der richtigen höhe...

Hab versucht ein float: left-top; zu machen funktioniert im FF wunder bar jedoch im IE wird der Text überschweifend und fliesst ins Menu, wenn das Menu zu ende ist.
 
Das liegt wohl an dem umlaufenden Innenabstand, den Du für das DIV #content bestimmt hast.

Ändere daher mal den Wert folgendermaßen:

Code: 
div#content {
        float: left;
        padding: 0 20px; /* oben,unten = 0 / links,rechts = 20px */
        margin-left: 110px !important; /* Für nicht-IE-Browser */
        margin-left: 0; /* Für IE */
}
 
IE = alles oben und links ohne oberen abstand zum banner
FF = Menu oberer abstand zum Banner und alles so wie ich es haben will, Content immer noch weiter unten...
 
FF: ist nun erledigt:D

IE: macht ganz missliche sachen:D wenn vom Menu z.b. 2 Zeilen da sind im Menu so wird im Content bei diesen 2 Zeilen der Text um 1px etwa nach rechts verschoben und die restlichen Content zeilen bleiben normal. (also es ist da nicht mehr links bündig). Wenn das Menu grösser ist z.b. 5 Zeilen sind die ersten 5 Zeilen des Content verschoben...

btw: schluckt der IE position: fixed nicht? weill da auch was (etwas anderes) nicht klappt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück