✔ Navigation rechts positionieren

m_topic · 25. November 2006

Hallo,

ich habe mir vorgenommen ein Mal etwas anderes zu probieren und Navigation statt immer links dies Mal rechts zu platzieren.

Ich brauche also zwei nebeneinander positionierte layers Inhalt links und Navigation rechts. Rechte layer „Navigation“ ist 200px Breit und linke hat keine feste breite sondern eine min. Breite von 500px so dass sich die Seite bei grösseren Resolutionen automatisch anpassen kann. Im Normalfall würde ich dem linkem layer float:left; setzen und die Sache währe erledigt da der linke layer kein definierte Breite hat funktioniert dass leider nicht, Inhalt dehnt sich 100% aus und druckt den Navigation nach unten.

Ist denn so was überhaupt möglich?

Hier mein Problem noch mal:

Code:

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

<style type="text/css">
body {
	margin:				10px;
	color:				#FFFFFF;
}

.container {
	min-width:			700px;
	height:				300px;
	background-color: 	#FF9900;
}

.links {
	min-width: 			500px;
	height:				200px;
	background-color:	#3366FF;
	float:				left;
}

.rechts {
	width:				200px;
	height:				100px;
	background-color:	#990000;
	float:				right;
}

.links_title {
	height:				20px;
	background-color:	#00CCFF;
	min-width:	        500px;
}

.links_title_links {
	width:				200px;
	float:				left;
	background-color: 	#99CCCC;
}

.links_title_rechts {
	width:				300px;
	float:				right;
	background-color: 	#99CCFF;
}

.clear {
	clear:				left;
}

</style>
</head>

<body>
<div class="container">
  <div class="links">
  	<div class="links_title">
			<div class="links_title_links">Title1</div>
			<div class="links_title_rechts">Title2</div>
    </div>
		<div class="clear"></div>
		Inhalt:<br>
		Inhalt hat eine min. Breite von 500px. Ansonst sollte er sich bei gr&ouml;sseren Resolutionen automatisch ausdehnen und Navigation bis auf den Rand drucken. </div>
	<div class="rechts">Navigation sollte immer rechts-oben stehe und nicht wie jetzt nach unten springen. </div>
	<div class="clear"></div>
	Container passt sich ebenfalls auf die Resolution auf und er darf nicht kleiner als 700px sein (Inhalt + Navigation) </div>
</body>
</html>

Maik · 25. November 2006

Hast du dir das so vorgestellt?

Code:

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

<style type="text/css">
body {
        margin:                                10px;
        color:                                #FFFFFF;
}

.container {
        min-width:                        700px;
        height:                                300px;
        background-color:         #FF9900;
}

.links {
        min-width:                         500px;
        height:                                200px;
        background-color:        #3366FF;
        margin-right:                         200px !important; /* Für moderne Browser */
        margin-right:                         197px; /* Für IE */
}

.rechts {
        width:                                200px;
        height:                               100px;
        background-color:        #990000;
        float:                                right;
        margin-left:                          0 !important;  /* Für moderne Browser */
        margin-left:                          -3px; /* Für IE */
}

.links_title {
        height:                                20px;
        background-color:        #00CCFF;
        min-width:                500px;
}

.links_title_links {
        width:                                200px;
        float:                                left;
        background-color:         #99CCCC;
}

.links_title_rechts {
        width:                                300px;
        float:                                right;
        background-color:         #99CCFF;
}

.clear {
        clear:                                left;
}

</style>
</head>

<body>
<div class="container">
  <div class="rechts">Navigation sollte immer rechts-oben stehe und nicht wie jetzt nach unten springen. </div>
  <div class="links">
          <div class="links_title">
                        <div class="links_title_links">Title1</div>
                        <div class="links_title_rechts">Title2</div>
    </div>
                Inhalt:<br>
                Inhalt hat eine min. Breite von 500px. Ansonst sollte er sich bei grösseren Resolutionen automatisch ausdehnen und Navigation bis auf den Rand drucken. </div>
        <div class="clear"></div>
        Container passt sich ebenfalls auf die Resolution auf und er darf nicht kleiner als 700px sein (Inhalt + Navigation) </div>
</body>
</html>

m_topic · 25. November 2006

Hey du bist mein Held ^^

genau so habe ich mir das vorgestellt. IE interpretiert es leider falsch, sollte aber lösbar sein. Hab was interessantes gefunden, mal schauen ob es hinhaut.

m_topic · 25. November 2006

Naja cssplay.co.uk tipp hilft mir nicht gorss. IE kennt kein min und max-widht oder?
Hab auch noch

Code:

* html .links_title {
width:expression(document.body.clientWidth < 500? "500px": "auto")
}

ausprobiert bring aber auch nicht viel. Hast du vielleicht eine Idee?

Maik · 25. November 2006

Du warst mit dem Workaround schon auf dem richtigen Weg, nur muß er auch zusätzlich auf das DIV .container angewendet werden. Und warum bestimmst du nicht direkt für die übergeordnete linke Spalte .links eine Mindestbreite?

Zudem ist anstelle des body-Objekts das documentElement-Objekt erforderlich, da der IE mit dem gewählten Doctype im Standardmodus läuft:

Code:

* html .container {
        width:expression(document.documentElement.clientWidth < 700? "700px": "auto" );
        }

* html .links {
        width:expression(document.documentElement.clientWidth < 500? "500px": "auto" );
        }

m_topic · 26. November 2006

Toll, jetzt laufts. Das mit dem body und documentElement Object verstehe ich aber nicht so ganz. Ohne funktioniert es auch, oder?

Lösung:

Code:

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

<style type="text/css">
body {
        margin:10px;
        color:#FFFFFF;
}

.container {
		width:expression(document.documentElement.clientWidth < 700? "700px": "auto" );
        min-width:700px;
        height:300px;
        background-color:#FF9900;
}

.links {
        width:expression(document.documentElement.clientWidth < 500? "500px": "auto" );
		height: 200px;
		background-color:#3366FF;
        margin-right:200px !important;
        margin-right:197px;
		position:relative;
		widows:500;
        }

.rechts {
        width:200px;
        height:100px;
        background-color:#990000;
        float:right;
        margin-left:0 !important;
        margin-left:-3px;
}

.links_title_links {
        width:200px;
        float:left;
        background-color:#99CCCC;
}

.links_title_rechts {
        width:280px;
        float:right;
        background-color:#99CCFF;
		text-align:right;
}

.links_inhalt {
        float:left;
		background-color:#00FF99;
		width: 100%;
}

.clear {
        clear:left;
}


</style>
</head>

<body>
<div class="container">
	<div class="rechts">Navigation</div>
	
	<div class="links">
		<div class="links_title_links">Title1</div><div class="links_title_rechts">Title2</div>
		<div class="clear"></div>
		<div class="links_inhalt">Inhalt:<br></div>
	</div>
	<div class="clear"></div>
	
</div>
<div class="clear"></div>
</body>
</html>

Maik · 26. November 2006

Was meinst du mit "ohne funktioniert es auch"?

Und was hat es hiermit auf sich?

Code:

.links {
        width:expression(document.documentElement.clientWidth < 500? "500px": "auto" );
		height: 200px;
		background-color:#3366FF;
        margin-right:200px !important;
        margin-right:197px;
		position:relative;
		widows:500;
        }

@body- / documentElement-Objekt

Die von dir gestern Abend gezeigte Workaround-Variante mit dem body-Objekt funktioniert im IE nur dann, wenn er in den Quirksmodus versetzt wird:

Code:

<!-- put IE into Quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

m_topic · 26. November 2006

Ah, ok. Ich wusste nicht wozu das "windows:500;" gut sein sollte so dachte ich irgendwas müsste noch ergänzt werden.

Nochmal vielen Dank für deine Hilfe.

Maik · 26. November 2006

Stellt sich die Frage, von wo du das widows:500; her hast, denn in deinem ursprünglichen Quellcode und meiner modifizierten Fassung kommt es nicht vor

✔ Navigation rechts positionieren

m_topic

Mitglied

Maik

m_topic

Mitglied

m_topic

Mitglied

Maik

m_topic

Mitglied

Maik

m_topic

Mitglied

Maik

Neue Beiträge