zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie gleichbleibenden länge von zwei boxen nebeneinander?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.06.2008, 12:49
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard Wie gleichbleibenden länge von zwei boxen nebeneinander?

hallo,

ich hab ein kleines problem. mir will es nicht gelingen zwei nebeneinanderliegende boxen, mit unterschiedlich langen texten, gleich lang zu bekommen.

das problem hab ich mit den boxen .box1 / .box1a (Battlestar Galactica) und .box2 / .box2a (Farscape). Ihr findet ein Bild dazu im Anhang.

http://sf-universe.net/test/

xhtml (Valides XHTML 1.0 Strict)
Code:
			<div id="content">

				<div class="box0">

					<img src="design/img/babylon5.jpg" alt="" />

						<h2>Babylon 5</h2>

							<h3>Neue Folgen bereits im Herbst!</h3>

							<h4>24.Juni 2008 - 01:25 Uhr</h4>

				<p>Eine kleine Sensation bahnt sich im SciFi-Sektor an. Nach fast 10 Jahren erscheinen im Herbst die 	

				ersten 10 Folgen von der 6. Staffel "Spacecenter Babylon 5". Die restlichen 10 sollen dann im Frühjahr 	

				2009 in den USA auf Sendung gehen.</p>

					<ul class="box0_nav">
						<li><a href="index.html" title="">Weiterlesen ...</a></li>
						<li><a href="index.html" title="">Im Forum diskutieren ...</a></li>
					</ul>
				</div>
				<!-- box0 end -->



				<div class="box1">

					<img src="design/img/battlestar_galactica.jpg" alt="" />

				</div>
				<!-- box1 end -->

				<div class="box2">

					<img src="design/img/farscape.jpg" alt="" />

				</div>
				<!-- box2 end -->

				<div class="box1a">

						<h2>Battlestar Galactica</h2>

							<h3>Letzte und 4 Runde!</h3>

								<h4>24.Juni 2008 - 01:25 Uhr</h4>

					<p>Autem dolore dolor ullamcorper et molestie dolor feugiat illum
					nostrud et vel sit accumsan iusto quis duis eu vulputate.</p>

				</div>
				<!-- box1a end -->

				<div class="box2a">

						<h2>Farscape</h2>

							<h3>Kommt die 4 Staffel endlich auf Deutsch?</h3>

								<h4>24.Juni 2008 - 01:25 Uhr</h4>

					<p>Autem dolore dolor ullamcorper et molestie dolor feugiat illum
					nostrud et vel sit accumsan iusto quis duis eu vulputate.</p>

				</div>
				<!-- box2a end -->



				<div class="box">

					<img src="design/img/stargate-sg2.jpg" alt="" />

						<h2>Stargate Kommando SG-1</h2>

							<h3>Der zweite Film folgt im Herbst!</h3>

							<h4>24.Juni 2008 - 01:25 Uhr</h4>

				<p>Nach dem grossen Erfolg von "The Ark of Truth", folgt im Oktober der Film "Continum".</p>

					<ul class="box0_nav">
						<li><a href="index.html" title="">Weiterlesen ...</a></li>
						<li><a href="index.html" title="">Im Forum diskutieren ...</a></li>
					</ul>
				</div>
				<!-- box end -->

			</div>
			<!-- content end -->
css
Code:
#content {
	float:right;
	width:462px;
	background:#212121;
}

.box0 {
	width:460px;
	margin-bottom:4px;
	padding-bottom:5px;
	border:1px solid #aaa;
	color:#000;
	background:#ddd;
}

.box {
	clear:both;
	width:460px;
	margin-bottom:4px;
	border:1px solid #aaa;
	color:#000;
	background:#ddd;
}

.box img, .box0 img {
	border-bottom:1px solid #aaa;
}

.box h2, .box h3, .box0 h2, .box0 h3, .box h4, .box0 h4 .box1a h2, .box1a h3, .box2a h2 .box2a h3 {
	margin:5px 0 0 5px;
	font-size:medium;
	font-style:italic;
}

.box h3, .box0 h3 {
	font-size:small;
	margin-top:0px;
}

.box1a h3, .box2a h2 .box2a h3 {
	font-size:small;
}

.box h4, .box0 h4, .box1a h4, .box2a h4 {
	font-size:x-small;
	margin-top:0px;
}

.box p, .box0 p {
	margin:10px 0 0 5px;
}

.box_nav a, .box0_nav a {
	margin:5px 0 0 5px;
	text-decoration:none;
}

.box1, .box2 {
	float:left;
	width:229px;
	border:1px solid #aaa;
	color:#000;
	background:#ddd;
}

.box2 {
	float:right;
}

.box1a, .box2a {
	float:left;
	width:229px;
	margin-bottom:4px;
	border-left:1px solid #aaa;
	border-bottom:1px solid #aaa;
	border-right:1px solid #aaa;
	color:#000;
	background:#ddd;
}

.box2a {
	float:right;
}

.box1a p, .box2a p {
	margin:10px;
	text-align:justify;
}
Angehängte Grafiken
Dateityp: jpg boxen.jpg (53,8 KB, 4x aufgerufen)
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
Boxen nebeneinander untereinander Muckelfloh CSS 1 14.12.2009 19:56
3 Boxen nebeneinander Roux CSS 3 15.07.2008 15:20
2 CSS Boxen nebeneinander positionieren -seppel- CSS 3 25.06.2008 00:45
2 Boxen nebeneinander ? Ivory CSS 3 08.10.2006 15:41
3-spalten-layout --> boxen nebeneinander positionieren nevermind CSS 9 03.01.2006 13:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:27 Uhr.