zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div-Container ordentlich untereinander anordnen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.11.2004, 14:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2004
Beiträge: 5
tomnovo befindet sich auf einem aufstrebenden Ast
Standard div-Container ordentlich untereinander anordnen?

Hallo Zusammen!

Ich habe einen Content-Container, in dem ich gerne weitere Container einfügen möchte. Ich möchte diese Container gerne untereinander anordnen, erhalte jedoch teilweise Überschneidungen.

Im IE wird die Anordnung (untereinander) richtig dargestellt; in Opera, Firefox und Netscape kommt es dagegen zu Überschneidungen. Gibt es eine für alle Browser verständliche Anweisung, Container untereinander anzuordnen?

Danke im Voraus!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.11.2004, 14:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Wo ist das Problem? Die ordnen sich doch von ganz allein untereinander an.

Bitte poste Deinen Code, damit man sehen kann, was da schief läuft!
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.11.2004, 14:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2004
Beiträge: 5
tomnovo befindet sich auf einem aufstrebenden Ast
Standard Code

Das Problem liegt bei breaklineContent. Wie gesagt, im IE werden die untereinander angeordent, in den anderen Browsern nicht.

Ich hoffe, ihr blickt durch den Code durch.

Code:
#content{
	padding: 0px 10px 0px 0px;
	float: left;
	width: 548px;
	border-right: 1px solid #ccd2d2;
}

#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #ffffff;
	font-weight: normal;
}

#pageName{
	padding: 0px 0px 5px 15px;
	margin-bottom: 30px;
}


#breadCrumb{
	padding: 5px 0px 5px 15px;
	font: small Verdana,sans-serif;
	color: #AAAAAA;
}

.feature{
	padding: 0px 0px 0px 15px;
	position: relative;
	width: 530px;
	font-size: 11px;
}

.chartsLeft {
	width: 170px;
	float: left;
}

.chartsMiddle {
	width: 170px;
	float: left;
}

.chartsRight {
	width: 170px;
	float: right;
}

.columnLeft{
	width: 250px;
	float: left;
	border-right: 1px solid #ccd2d2;
	padding-right: 10px;
}

.columnRight{
	float: right;
	width: 260px;
}

.story {
	padding: 0px 0px 0px 15px;
	font-size: 80%;
}

.breaklineContent{
	margin-top: 20px;
	margin-left: 15px;
	border-top: 1px solid #ccd2d2;
	width: 530px;
	position: relative;
}
Hier das HTML-Zeugs:
Zitat:
<div id="content">
<div id="breadCrumb">Breadcrumb / Breadcrumb / Breadcrumb /</div>
<div id="pageName">
<h2>Herzlich Willkommen!</h2>
</div>
<div class="story">
<div class="red subLine">St&ouml;bern nach Interpreten</div>
<div class="orange letterSpacing">asdasfasf</div>


<div class="red subLine">Suche</div>
<div class="orange">
in
<select name="">
<option value="all">Alle Felder</option>
<option value="interpret">Interpret</option>
<option value="titel">Titel</option>
</select>
nach
<input name="suche" type="text" class="textbox" size="30" maxlength="50">
<input type="submit" name="Submit" value=" Los! " class="textbox">
</div>
<div id="mikrofon"></div>
</div>
<div class="breaklineContent"></div>
<div class="feature"><h3 class="red">Unsere Charts</h3>
<div class="chartsLeft">[img]cd.jpg[/img]</div>
<div class="chartsMiddle">[img]cd.jpg[/img]</div>
<div class="chartsRight">[img]cd.jpg[/img]</div>
</div>
<div class="breaklineContent"></div>
<div class="feature">
<div class="columnLeft"></div>
<div class="columnRight"></div>
</div>
<div class="breaklineContent"></div>
</div>
Mit Zitat antworten
  #4 (permalink)  
Alt 28.11.2004, 15:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Das Problem liegt im floaten ohne zu clearen.

Gefloatetete Elemente liegen außerhalb des normalen Elementflußes. Danach muß ein clear:both gesetzt werden, um den nächsten Container darunter zu positionieren.

Außerdem: warum definierst Du die nebeneinanderliegenden Bilder doppelt?

Code:
.chartsLeft {
   width: 170px;
   float: left;
}

.chartsMiddle {
   width: 170px;
   float: left;
}

.chartsRight {
   width: 170px;
   float: right;
}
+

Code:
 <div class="chartsLeft">[img]cd.jpg[/img]</div>
<div class="chartsMiddle">[img]cd.jpg[/img]</div>
<div class="chartsRight">[img]cd.jpg[/img]</div>


Noch ein Tipp: Bilder können auch alleine floaten - die brauchen kein <div> drumrum - also einfach so:
[img]cd.jpg[/img]
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
  #5 (permalink)  
Alt 28.11.2004, 16:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2004
Beiträge: 5
tomnovo befindet sich auf einem aufstrebenden Ast
Standard

Wow, super hat geklappt! Danke!

Zitat:
Außerdem: warum definierst Du die nebeneinanderliegenden Bilder doppelt?
Wie meinst du das? Wie kann ich es anders machen? (befasse mich erst seit 2 Wochen mit CSS)

Noch ein anderer Darstellungsunterschied in den Browsern:
Zitat:
.breaklineContent{
margin-top: 20px;
margin-left: 15px;
border-top: 1px solid #ccd2d2;
width: 530px;
position: relative;
clear: both;
height: 20px;
}
Habe - wie man sieht - noch height hinzugefügt, weil NS und Mozilla keine Höhe "automatisch" einfügen wie IE und Opera. Der Abstand zum nächsten Element unterhalb der border-Linie ist nun überall gleich.

Oberhalb der border-Linie jedoch beträgt der Abstand in NS und Firefox nicht - wie angegeben - 20px, sondern anscheinend eher 0px. Dies betrifft jedoch wieder nur die Darstellung der beiden Breaklines nach den gefloateten charts-Containern. Wie bekomme ich nun den Abstand da rein?
Mit Zitat antworten
  #6 (permalink)  
Alt 14.05.2010, 17:18
Neuer Benutzer
neuer user
 
Registriert seit: 14.05.2010
Beiträge: 2
Andoni befindet sich auf einem aufstrebenden Ast
Standard Probleme!!

Hallo zusammen

Ich habe da ein Problem mit meinem CSS glaube ich.

Welcome at Andonis Homepage

hier und auch bei Videos habe ich das Problem, dass es irgendwie nicht richtig angezeigt wird. Beim scrollen geht es nicht richtig unter dem oberen und unteren Streifen kann mir jemand helfen??

Code:
body {
	background-image:url(Bilder/BG.jpg);
	background-position:center top;
	background-repeat:repeat-x;
	background-attachment:fixed;
}

/* Anfang Header */
.divHeader {
	background-image:url(Bilder/header.jpg);
	position:fixed;
	height:150px;
	width:100%;
	top:0;
	right:0;
	
}

.divHeaderInner {
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	width:800px;
	height:150px;
	margin:auto;
}

.MenuPicL {
	/*float:left;*/
	height:150px;
	width:170px;
	background-image:url(Bilder/rueda.png);
	position:fixed;
	top:0;
	left:0;
}

.MenuPicR {
	/*float:left;*/
	height:150px;
	width:170px;
	background-image:url(Bilder/rueda.png);
	position:fixed;
	top:0;
	right:0;
}
/* Ende Header */

/* Body Anfang */
.divBody {
	background-image:url(Bilder/body.jpg);
	background-repeat:repeat-y;
	margin:auto;
	width:800px;
	
	
}

.divBodyInner {
	padding-top:180px;
	padding-bottom:72px;
	padding-left:10px;
	padding-right:10px;
	font-size:22px;
	
}
/* Body Fertig */

/* Footer Anfang */
.divFooter {
	background-image:url(Bilder/footer.jpg);
	position:fixed;
	right:0;
	bottom:0;
	height:62px;
	width:100%;
}

.divFooterInner {
	font-size:16px;
	text-align:center;
	padding-top:15px;
}
/*Footer Ende*/

/* CSS für Footer Links */
.footerLink {
	text-decoration:none;
	color:#FFFFFF;
}

a.footerLink:link {
	color:#FFFFFF;
}

a.footerLink:visited{
	color:#FFFFFF;
}

a.footerLink:hover {
	color:#181f29;
}
/* Fertig mit Footer Links */

/* Drop down Menu */

div.menu{
	width:800px;
	margin-top:110px;
	margin-left:auto;
	margin-right:auto;
	background-color:#313f53;
	height:30px;
	text-align:center;
}

ul.menu{
	position:relative;
	padding:0px;
	margin:0px;
	list-style-type:none;
	color:#FF00FF;
	float:left;
}

ul.menu ul{
	position:absolute;
	list-style-type:none;
	margin:0px;
	display:none;
	margin-left:-40px;
	z-index:1;
}

ul.menu ul ul{
	position:absolute;
	display:none;
	margin-top:-20px;
	margin-left:121px;
	z-index:-1;
}

ul.menu:hover ul
{
	display:block;
	
	
}

ul.menu:hover ul ul
{
	display:none;
}

ul.menu ul li:hover ul
{
	display:block;
}

a.menu
{
	display:block;
	/*background-color:#313f53;*/
	background-image:url(Bilder/btn.jpg);
	width:149px;
	height:30px;
	padding-left:10px;
	padding-top:10px;
	text-decoration:none;
	color:#FFFFFF;
	font-family:arial;
	text-align:center;
	font-size:15px;
	border-bottom: solid 1px black;
	border-right: solid 1px #000099;
}

a.menu:hover
{
	background-color:#006699;
	color:#66FFFF;
}

/* Drop down Menu fertig */

/* Titel bei z.B About */
.titel {
color:#0099CC;
font-style:inherit;
font-size:24px;
}

/* Text im Footer */
.footerText{
color:#FFFFFF;
text-align:center;
font-size:12px;
}

/* Zitat Satz */
.zitat {
color:#FFFFFF;
font-style:italic;
font-size:16px;
}

/* Zitat Autor */
.zitat2 {
color:#0099CC;
font-style:italic;
font-size:12px;
}

/* Spruch Div */
.divSpruch {
	width:100px;
	height:150px;
	float:right;
	z-index:1;
}
/* Ende Spruch */
das ist meine CSS.

Ich bedanke mich schon im Vorraus
Mit Zitat antworten
  #7 (permalink)  
Alt 14.05.2010, 21:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Du hast 2 Probleme eingebaut:

a) Du hast keinen z-index für absolut bzw. fixiert positionierte Elemente angegeben.
b) Wenn Flash-Dateien von HTML-Elementen überlappt werden sollen dann musst Du einen wmode angeben. Informier dich darüber bei Adobe.

Und wieso machst Du dafür kein eigenes Topic auf?
Mit Zitat antworten
  #8 (permalink)  
Alt 15.05.2010, 10:57
Neuer Benutzer
neuer user
 
Registriert seit: 14.05.2010
Beiträge: 2
Andoni befindet sich auf einem aufstrebenden Ast
Standard

jaaa keine ahnung xD bin neu hier und dachte der Titel würde passen

aber danke für deine Antwort. Mal schaun was sich da tun lässt.
Mit Zitat antworten
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
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
DIV Höhe 100% Daniel86 CSS 12 29.07.2011 13:40
DIV container verschachteln und pixelgenau platzieren Yakilo CSS 4 02.02.2010 20:18
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18
div container verschachteln blau CSS 2 05.12.2006 20:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:48 Uhr.