Antworten auf deine Fragen:
Neues Thema erstellen

Dynamische Divs nebeneinander / FLOAT-problemchen

eFoX

Reiche Zahnarztgattin

immer diese floats...
machen nur probleme :D

zum problem:
ich habe drei divs nebeneinander. namentlich:
navigation_l --> auf der linken seite
navigation_mitte --> mittig
navigation_r --> auf der rechten seite

die Grafiken darin habe ich nun ganz einfach mit A, B und C bezeichnet.
wobei A und C die gleichen abmessungen haben und B (=Mitte) sich einfach solang wiederholen soll bis C erreicht ist.

so siehts aus:


aber so solls richtig sein:


CSS:
HTML:
#wrapper {
width: 80%;
margin: 0 auto;
border: 1px solid black;
}

#navigation {
margin-top: 50px;
border: 1px solid green;
}

#navigation_l {
background:url(l.png) #000;
width: 170px;
height: 170px;
border: 1px solid red;
float: left;
}

#navigation_mitte {
background:url(mitte.gif); 
border: 1px solid red;
height: 170px;
float: both;
}

#navigation_r {
background:url(r.png) #000;
width:170px;
height: 170px;
border: 1px solid red;
float: right;
}
zum css:
wie gesagt da sich die größe von der mitte dynamisch anpassen soll /bzw. der wrapper dynamisch 80% als wert in der breite hat (ich also diesen wert nicht weis), hat der navigation_mitte div keine breitenangabe.


HTML:
HTML:
<body>
		<div id="wrapper">
		<p>hier der wrapper</p>
		
			<div id="navigation">
			        <div id="navigation_l"></div>
				<div id="navigation_mitte"></div>
				<div id="navigation_r"></div>
			
			</div>
		</div>
	</body>
 

tomtom

css/cms-learning

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Wenn ich mich irre, dann Entschuldigung.
Probiere es mal mit float:left für die 3 Div's navigation rechts, mitte und links.
Sorry wenn es nicht klappt, versuche auch gerade mich in Css einzulesen. sitze aber momentan am verkehrten Rechner. Viel Glück. Vllt. hilft auch der Link weiter, ist aber mit fester Breite:

http://d-graff.de/selfhtml/dreidivs.html
 
Zuletzt bearbeitet:

TimeePic

Nicht mehr ganz neu hier

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

so wie tomtom geschrieben hat ist der richtige weg, du musst alle drei divs nach left floaten.

floaten bedeutet der div bewegt sich zu gegenüberliegenden rand und geht dann soweit nach oben, bis er wo anders anstößt.

da dein navi_r float right hat, bedeutet dies, es schwebt nach links und dann nach oben bis es anstößt (unterhalb von navi_l) und geht dann nach rechts, deshalb wird es unterhalb deiner zwei anderen divs angezeigt.

Schau mal bei Little Boxes Teil 1, dort wird es genau so erklärt.

Auszug aus V2B LittleBoxes Teil 1:
CSS
#kopfbereich {
position: relative;
background-color: #ffe574;
background-image: url(farbverlauf.jpg);
background-repeat: repeat-y;
color: black;
padding: 10px 20px 10px 20px; /* oben - rechts - unten - links */
}
#kopfbereich p {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 0;
margin-bottom: 0;
}
#kopfbereich p span {
color: #d90000;
}

#navibereich {
float: left;
width: 110px;
padding-left: 20px;
padding-top: 20px;
}
#navibereich ul {
width: 6em;
border-top: 1px solid #d90000;
}
#navibereich li {
list-style-type: none;
border-left: 1px solid #d90000;
border-bottom: 1px solid #d90000;
margin: 0;
}
#navibereich a,
#navibereich span {
display: block;
text-decoration: none;
background-color: #ffe574;
color: black;
padding: 4px;
border-left: 3px solid #ffe574;
}
#navibereich a:hover,
#navibereich a:focus {
background-color: white;
color: black;
border-left-color: #d90000;
border-bottom: none;
}
#startseite #navi01 span,
#galerieseite #navi02 span,
#kontaktseite #navi03 span {
background-color: white;
color: black;
border-left-color: #d90000;
border-bottom: none;
}

#spalte03 {
float: right;
width: 110px;
padding: 10px;
}

#textbereich {
background-color: white;
padding: 20px 10px 20px 20px;
margin-right: 130px;
margin-left: 130px;
}
#textbereich a {
border-bottom: 1px dotted #cc0000;
}
#textbereich ul li {
list-style-type: square;
}
#textbereich a:hover,
#textbereich a:focus {
border-bottom: 1px solid #d90000;
}
HTML
<div id="kopfbereich">
<div class="skiplink"><a href="#textbereich">Zum Inhalt springen</a></div>
<h1><img src="logo.gif" alt="Little Boxes" width="222" height="32" id="logo" /></h1>
<p>Webseiten gestalten mit CSS. <span>Grundlagen</span>.</p>
</div> <!-- Ende kopfbereich -->

<div id="navibereich">
<ul>
<li id="navi01"><span>Startseite</span></li>
<li id="navi02"><a href="galerie.html" title="Galerie mit Landschaftsbildern">Galerie</a></li>
<li id="navi03"><a href="kontakt.html" title="Zum Kontaktformular">Kontakt</a></li>
</ul>
</div> <!-- Ende navibereich -->

<div id="spalte03">
<h2>#spalte03</h2>
<p>Lorem ipsum dolor sit amet, ... </p>
</div> <!-- Ende spalte03 -->

<div id="textbereich">
<h2>Startseite</h2>

<p><img src="roter_ballon.jpg" alt="Roter Luftballon" width="78" height="100" title="Roter Luftballon" class="bildrechts" />Webseiten bestehen aus <strong>rechteckigen K&auml;stchen</strong>, die &uuml;ber-, neben- und ineinander gestapelt werden. Alles Runde ist entweder Trick oder Grafik oder beides.</p>

<p>Die folgenden Schritte zeigen den Weg vom Zusammenbauen der <em>Kisten</em> bis zur fertig gestalteten <em>Webseite</em>.</p>

<ol>
<li>So funktioniert HTML</li>
<li>Wichtige HTML-Elemente
<ul>
<li>&Uuml;berschriften</li>
<li>Abs&auml;tze und Listen</li>
<li>Links und Grafiken</li>
</ul>
</li>
<li>Gestalten mit CSS</li>
</ol>

<p>Weitere Infos zur DVD bekommen Sie bei <a href="http://www.video2brain.com" title="Startseite von video2brain">video2brain</a>.</p>

</div> <!-- Ende textbereich -->
 
Zuletzt bearbeitet:

eFoX

Reiche Zahnarztgattin

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

guten abend liebe leute!
es war leider keine 'richtige' eindeutige lösung dabei, aber es hat mich angeregt und ich habe etwas umgebaut... und siehe da, nun geht es, ABER grafik "rechts" ist angeschnitten :(
was habe ich getan:
HTML:
#navigation {
margin-top: 50px;
}

#navigation_l {
background:url(l.png) #000;
width: 15%;
height: 176px;
float: left;
}

#navigation_mitte {
background:url(mitte.gif) repeat-x; 
height: 176px;
min-width:70%;
float: left;
}

#navigation_r {
background:url(r.png) #000;
width: 15%;
height: 176px;
float: left;
}

(ich habe gelesen ein gefloateter div wird als block element behandelt und erfordert demzufolge eine angabe der breite)
 
Zuletzt bearbeitet:

sokie

Mod | Web

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

wie ist es denn mit einer lösung mit absoluten positionierungen (innerhalb des wrappers):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
  #wrapper{
    width: 80%;
    margin: auto;
    position: relative;
  }
  #links,#rechts{
    position: absolute;
    height: 170px;
    width: 170px;
    background: #C00361;
  }
  #links{
    left: 0;
  }
  #rechts{
    right: 0;
  }
  #mitte{
    position: absolute;
    top: 0;
    right:170px;
    left: 170px;
    background: #03A4C0;
    min-height: 400px;
  }
</style>
<title></title>
</head>

<body>
<div id="wrapper">
  <div id="links"></div>
  <div id="rechts"></div>
  <div id="mitte">inhalte</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:

Herr_D

offline

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Relativ kleiner Fehler (oder auch groß) bezogen auf dein erstes Beispiel:


Du musst dem inneren (mitte) div keine Weite zuordnen, aber wenn du links und rechts floatest, dann musst du die reihenfolge der div im html beachten... erst die gefloateten, dann mitte ohne weite und float... dann passt sich auch die weite automatisch an...


Code:
<!doctype html public "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title>Flother Dreier</title>
<meta name="author" content="R.D">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<style type="text/css">
<!--
* {margin:0; padding:0 }

body {
font-size:100.01%;
font-family: sans-serif;
}


#outro {
width:800px;
margin:auto;
border:1px solid #000;
}

#navigation {
margin-top: 50px;
border: 1px solid green;
}

#navigation_l {
background: #000;
width: 170px;
height: 170px;
border: 1px solid red;
float: left;
}

#navigation_mitte {
background:#dedede;
border: 1px solid red;
height: 170px;
}

#navigation_r {
background: #000;
width:170px;
height: 170px;
border: 1px solid red;
float: right;
}

.klare_suppe {
clear:both:
}


-->
</style>
</head>
<body >
<div id="outro">
        <div id="navigation">
        <div id="navigation_l"></div>
        <div id="navigation_r"></div>
        <div id="navigation_mitte"></div>
        <div id="klare_suppe"></div>
</div>
</div>

</body>
</html>
 

Samuelll

Aktives Mitglied

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Hallo Herr D, interessante Variante.

Klappt die ohne Hacks auf allen Browsern ?
Ggf. auch mit Margins und Paddings ohne Probleme ?
 

eFoX

Reiche Zahnarztgattin

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

Erstmal danke an sokie, Herr_D, tomtom und TimeePic für die freundliche Hilfe!

1) 3x Float:left => ging nicht
2) Position:Absolute => ging nicht
3) Float:left, Float:right und Mitte kein Float => ging nur bedingt, komischerweise hat sich dann der Mitte-Div über die ganze Länge gezogen. Im Nachhinein ist mir dann gestern das Problem bewusst geworden, man hätte einfach einen Margin rechts/links dafür einstellen müssen.

so hab ich das nun gelöst... (will heißen es funktioniert nun wie gewollt)
(eine Mischung aus Idee 2 und 3)
HTML:
#wrapper {
width: 80%;
margin: 50px auto 0px auto;
}

#navigation {
width: 100%;
height: 175px;
overflow: hidden;
position: relative;
}

#navigation_l {
background:url(l.png);
width: 49px;
height: 175px;
position: absolute;
left: 0;
top: 0;
}

#navigation_mitte {
background:url(m.png) repeat-x;
height: 175px;
margin: 0 49px;
}

#navigation_r {
background:url(r.png);
width:49px;
height: 175px;
position: absolute;
right: 0;
top: 0;
}

.klare_suppe {
clear: both;
}

HTML:
<div id="wrapper">

			<div id="navigation">
				<div id="navigation_l"></div>
				<div id="navigation_mitte"></div>
				<div id="navigation_r"></div>
			</div>
			<div class="klare_suppe"></div>
		
</div>
 

sokie

Mod | Web

AW: Dynamische Divs nebeneinander / FLOAT-problemchen

wobei du den div zum clearen da nun nicht mehr brauchst, weil ja nichts gefloatet wird.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben