zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Breite von DIVs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2003, 19:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2003
Beiträge: 3
Daniel befindet sich auf einem aufstrebenden Ast
Standard Breite von DIVs

Hallo,

habe jetzt mal angefangen mit XhTML und CSS das Design für meine Homepage zu erstellen. Dabei möchte ich ein 2 spaltiges Layout benutzen. Die linke Seite soll dabei 160px (Prozentangabe benutze ich nicht, damit das Menü nicht zusammengeschoben wird) groß sein. Der Conent-Bereich auf der rechten soll den Rest ausfüllen. Welche Breite muß ich dort angeben? Gebe ich nichts an wird der Bereich so breit wie der Inhalt. Eine feste Pixelbreite will ich nicht angeben, da es ja unabhängig von der Auflösung sein soll.


Thx,
Daniel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2003, 22:27
Neuer Benutzer
neuer user
 
Registriert seit: 21.06.2003
Beiträge: 7
I.C.Wiener befindet sich auf einem aufstrebenden Ast
Standard

Moin,

ich habe gerade gestern mit einem ähnlichen Problem gekämpft.
Lösung:
hab ich nicht.
Nur alternativen...
Es ist eine gute Idee, die Breite des Layots auf 760px zu begrenzen, da 1. die meissten Leute mit 800x600 surfen und 2. das Layout nicht so gestreckt wird falls mal jemand mit 1280x1024 surft.

Was hast du denn beim rechten div angegeben?
Das linke wird wohl float:left sein, oder ?
Hast du das rechte mit float:right oder ohne Angabe dazu gesetzt?
Ich werde da auch noch einmal rumprobieren.

MfG
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2003, 22:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2003
Beiträge: 3
Daniel befindet sich auf einem aufstrebenden Ast
Standard

Hi,

genau, das linke ist float:left. Bei der rechten Spalte hab ich das float:right; gesetzt.

Daniel
Mit Zitat antworten
  #4 (permalink)  
Alt 23.06.2003, 12:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Es ist eine gute Idee, die Breite des Layots auf 760px zu begrenzen, da 1. die meissten Leute mit 800x600 surfen und 2. das Layout nicht so gestreckt wird falls mal jemand mit 1280x1024 surft.
Eine schlechte Idee

Generell sollte der Besucher einer Website doch selbst entscheiden in welcher Auflösung er Surft.

Sprechen wir doch von Client-Unabhänig; soweit so gut - sicher sollte man natürlich eine Mindestauflösung ( 800x600 ) berücksichtigen.

Aus diesem Grund sieht CSS2 ja auch die Werte MAX-WIDTH und MIN-WIDTH vor. Leider kann die der IE6 noch nicht.

Deshalb mein Vorschlag:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	<!--
	html,body {
		background-color: #FFFFFF; /* Hintergrungfarbe zur Kontrolle */
		color: #000000;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		margin: 0px;
		padding: 0px;		
	}

	#nav {
		width: 195px;
		background-color: #FF9900;
		float: left;
	}
	
	#minimumrest { background-color: #00FF00; /* Hintergrungfarbe nur zur Kontrolle */
		width: 100%; /* Prozentual vom Eltern-Element (#rest); d.h. volle verbleibende Breite; für IE */
		height: 4px; /* 4px nur zur Kontrolle ; besser 1px weil sowieso nicht sichtbar */
		border: 0px;
	}
	#rest {
		background-color: #0099FF;
		float: left;
		max-width: 75%; /* 75% von 780px = 585px; damit wird die 800x600 ordentlich Angezeigt */
		min-width: 585px;
	}
	
	.box {
		border: 1px solid #000000;
		margin: 5px;
		padding: 8px;
	}
	
	-->
</style>
</head>

<body><div id="nav">

<div class="box">Inhalt</div>
<div class="box">Inhalt
&
&
</div>


</div><div id="rest">


<div class="box">Inhalt</div>
<div class="box">Inhalt
&
&

&
&
</div>
<div class="box">Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </div>


[img]x.gif[/img]</div></body></html>


Die 2 Container die das Layout in NAV und Rest unterteilen sollten in jedem Fall ohne Border, Padding und Margin definiert werden; Da ja nach dem BOX-Modell genau diese Werte zu den Width-Angaben addiert werden und dann ist Essi-sch(-g) mit 100%........
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 23.06.2003, 13:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.05.2003
Beiträge: 129
Thomas (css 4 you) befindet sich auf einem aufstrebenden Ast
Standard

Es gibt eine Lösung:
Du lässt den div-Container für die Navigation links floaten, den für den Inhalt nicht. Da der Navi-Container floatet, gehört er nicht mehr zum Textfluß und liegt über dem Inhalts-Container. Dieser hat eine voreingestellte Breite von 100%. Nun gibst du ihm noch ein margin-left von z.B. 170px. Fertig:
Code:
<div style="float:left;width:160px;border:1px solid #000;">
Navigation
</div>

<div style="margin-left:170px;border:1px solid #000;">
inhalt
</div>

Gruß
Thomas
Mit Zitat antworten
  #6 (permalink)  
Alt 23.06.2003, 14:19
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Danke Thomas

ich kämpfte schon lange mit einem ähnlichen Problem. margin-left ist die Lösung. Danke für den Tip Thomas
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.06.2003, 15:12
Anonymous
Gast
 
Beiträge: n/a
Standard

da habe ich mich ja schön auf's Glatteis führen lassen.........

zumal die css4you-site ja genau auf diesem Prinzip beruht und Thomas dies schon mal ausführlich in diesem Forum (alt) erklärt hat.

TOP-Lösung von Thomas

übrigens es gibt noch einen Effekt mit FLOAT:

http://www.webwriting.de/sogehts/css...utfloater.html

hier der gesamte workaround:

http://www.webwriting.de/sogehts/css...al/tutalle.htm

nun steht ja einer Website mit relativer Breite nichts mehr im weg
Mit Zitat antworten
  #8 (permalink)  
Alt 23.06.2003, 15:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Anonymous
da habe ich mich ja schön auf's Glatteis führen lassen.........
das war ich.........., ich war aber angemeldet
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 23.06.2003, 19:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2003
Beiträge: 3
Daniel befindet sich auf einem aufstrebenden Ast
Standard

Hi,

danke nochmal. Die Lösung ist ja genial einfach.

Daniel
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div über volle Breite innerhalb eines divs mit fester Breite möglich? philippsen CSS 1 24.11.2013 19:28
Horizontaler Scroll mit DIVs und Breite über Javascript kolarsky Javascript & Ajax 1 16.08.2010 11:18
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite devnull CSS 3 02.02.2009 11:03
floaten von divs ohne breite dany CSS 18 27.03.2008 12:34
100 % breite divs nebeneinander mit innenabstand verutsch natürlich alles... bastien CSS 3 17.01.2008 23:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:18 Uhr.