zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden [probleme] kleine verschatelung mit divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2006, 08:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2004
Beiträge: 41
onip befindet sich auf einem aufstrebenden Ast
Standard [probleme] kleine verschatelung mit divs

hallo,

ich möchte eine auswahlliste mit 2 spalten und X reihen mittels divs lösen.
auf dem IE ist es gut, aber FF und Opera wollen noch nicht.
einmal wird der hintergrund nicht mit angepasst und der inhalt (bilder) nicht zentriert.
was ist da verkehrt?

danke schonmal

hier mal mein code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<TITLE>teaser</TITLE>
<style>
.content {
	height: 100%;
	background-color: #FFF;
}
	.divcontent {
		width: 446px;
		margin: 10px 0 10px 10px;
	}
	.divteaserbg {
		background-color: #bfbf97;
		border: 1px solid #000;
		height: 100%;
		width: 428px;
		padding: 2px 0;
	}
	.divteaserl {
		float: left;
		width: 200px;
		text-align: center;
		background-color: #FFF;
		border: 1px solid #000;
		margin: 4px;
		padding-bottom:10px;
	}
	.divteaserr {
		float: right;
		width: 200px;
		text-align: center;
		background-color: #FFF;
		border: 1px solid #000;
		margin: 4px;
		padding-bottom:10px;
	}
	.divteaserimg {
		width: 150px;
		height: 150px;
		overflow: hidden;
		padding-bottom: 10px;
		border: 1px solid #000;
		clear: left;
	}
</style>
</head>

<body>
<div class="content">
	<div class="divcontent">
		<h3>Head</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</p>
		<div class="divteaserbg">
			<div class="divteaserl"><h4>Teaser 1</h4>
				<div class="divteaserimg"><a href="#"><img src="img.jpg" alt="" border="0"></a></div>
			</div>
			<div class="divteaserr"><h4>Teaser 2</h4>
				<div class="divteaserimg"><a href="#"><img src="img.jpg" alt="" border="0"></a></div>
			</div>
			<div class="divteaserl"><h4>Teaser 3</h4>
				<div class="divteaserimg"><a href="#"><img src="img.jpg" alt="" border="0"></a></div>
			</div>
			<div class="divteaserr"><h4>Teaser 4</h4>
				<div class="divteaserimg"><a href="#"><img src="img.jpg" alt="" border="0"></a></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2006, 09:45
Benutzerbild von Prophet
Hobbyscripter
XHTMLforum-Mitglied
 
Registriert seit: 01.09.2006
Beiträge: 341
Prophet befindet sich auf einem aufstrebenden Ast
Standard

Wenn du schon div-Suppen verwendest kannst du auch gleich eine Tabelle einfügen. Ich glaube eine liste wäre da angebrachte.
__________________
[SIGPIC][/SIGPIC]
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.09.2006, 10:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2004
Beiträge: 41
onip befindet sich auf einem aufstrebenden Ast
Standard

danke für deine hilfe, naja oder auch keine.
was meinst du mit div suppe.
entweder kann man mit divs arbeiten oder nicht.

ist jemand da, der was nützliches beisteuern kann?

// edit
danke für den link.
liste war ein guter tip.

und sorry, wenn ich so grob war.
hatte diese nacht nicht schafen können.

Geändert von onip (07.09.2006 um 11:52 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.09.2006, 10:44
Benutzer
neuer user
 
Registriert seit: 31.05.2005
Ort: Hamburg
Beiträge: 49
Bata befindet sich auf einem aufstrebenden Ast
Standard

Man muss nicht alles in Divs packen, das meint er damit. Man kann auch andere Elemente mit css so gestalten, das es nach was aussieht!

Abgesehen von der Grobstruktur einer Seite kann man ansonsten in der Regel mit sehr wenigen Divs auskommen, je nachdem wie komplex das Layout der Page ist!
Mit Zitat antworten
  #5 (permalink)  
Alt 07.09.2006, 11:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2004
Beiträge: 41
onip befindet sich auf einem aufstrebenden Ast
Standard

ich hab die divsuppe mal gelesen, sehr aufschlußreich.
danke für den link.

also das ist nun mein ergebnis, leider noch ein kleiner fehler (ul passt sich der höhe nicht an).

vielleicht könnte mir dabei jemand helfen.
ein hinweis wäre schon viel.

mein code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<TITLE>teaser</TITLE>
<style>
	
	ul.ulteaser, .ulteaser li {
		border: 1px solid #000;
	}
	ul.ulteaser {
		width: 412px;
		padding: 0 10px 10px 10px;
	}
	.ulteaser li {
		list-style: none;
		display: inline;
		margin-top: 10px;
		padding: 6px 0 10px 0;
		width: 200px;
		text-align: center;
	}
	.ulteaser li.liteaserl {
		float:left;
	}
	.ulteaser li.liteaserr {
		float:right;
	}
	.divteaserimg {
		clear:both;
		width: 150px;
		height: 150px;
		overflow: hidden;
		border: 1px solid #000;
		margin-left: 25px;
	}
	*html .divteaserimg {
		margin-left: 0;
	}
</style>
</head>

<body>

<ul class="ulteaser">
	<li class="liteaserl"><h4>Teaser 1</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
	<li class="liteaserr"><h4>Teaser 2</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
	<li class="liteaserl"><h4>Teaser 3</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
	<li class="liteaserr"><h4>Teaser 4</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
</ul>
</body>
</html>
Mit Zitat antworten
  #6 (permalink)  
Alt 07.09.2006, 11:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2004
Beiträge: 41
onip befindet sich auf einem aufstrebenden Ast
Standard

ich hab's, naja fast.
der opera macht noch zicken.
der untere teil von ul wird bei padding-bottom dazugerechnet.
statt 10px hab ich dann 20 px.

Opera braucht 0px
IE & FF brauchen 10px

kann mann das noch fixen?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<TITLE>teaser</TITLE>
<style>
	
	ul.ulteaser, .ulteaser li {
		border: 1px solid #000;
	}
	ul.ulteaser {
		display: table-cell;
		width: 412px;
		margin-bottom:4px;
		padding: 0 10px 10px 10px;
		background-color: #FF0000;
	}
	.ulteaser li {
		list-style: none;
		display: inline;
		margin-top: 10px;
		padding-bottom: 10px;
		width: 200px;
		text-align: center;
		background-color: #FFF;
	}
	.ulteaser li.liteaserl {
		float:left;
	}
	.ulteaser li.liteaserr {
		float:right;
	}
	.divteaserimg {
		clear:both;
		width: 150px;
		height: 150px;
		overflow: hidden;
		border: 1px solid #000;
		margin-left: 25px;
	}
	*html .divteaserimg {
		margin-left: 0;
	}
	h4 {
		margin: 4px 0;
	}
</style>
</head>

<body>

<ul class="ulteaser">
	<li class="liteaserl"><h4>Teaser 1</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
	<li class="liteaserr"><h4>Teaser 2</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
	<li class="liteaserl"><h4>Teaser 3</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
	<li class="liteaserr"><h4>Teaser 4</h4><a href="#"><div class="divteaserimg"><img src="img.jpg" alt="" border="0"></div></a></li>
</ul>
</body>
</html>
Mit Zitat antworten
  #7 (permalink)  
Alt 07.09.2006, 11:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von onip
ich hab die divsuppe mal gelesen, sehr aufschlußreich.
danke für den link.
Aha. Wäre nett, wenn du das nächste Mal gleich lesen und dir das Anpöbeln deiner Helfer sparen würdest.
Danke.

Zitat:
also das ist nun mein ergebnis, leider noch ein kleiner fehler (ul passt sich der höhe nicht an).
Deinem float fehlt das clear.
Siehe FAQ Punkt 2 (z.B. easyclearing)
Mit Zitat antworten
  #8 (permalink)  
Alt 07.09.2006, 11:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2004
Beiträge: 41
onip befindet sich auf einem aufstrebenden Ast
Standard

beitrag wurde editiert.

clear hab ich nun drin.
ich hab nur noch das kleine problem mit dem padding-bottom von ul bei opera.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.09.2006, 12:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ist wohl ein Bug. Ich kenne keinen Fix. Probier mal mit anderen Kombinationen von padding und margin rum.
Im Opera 9 gibt es diesen Fehler nicht mehr.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.09.2006, 12:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2004
Beiträge: 41
onip befindet sich auf einem aufstrebenden Ast
Standard

ein rießen dank an allen helfern.
der bug wurde gefixt, indem man opera 9 nimmt
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
n Div's in eine Zeile Mustangore CSS 9 20.08.2009 16:19
Kleine Tab durch Divs ersetzen? marc75 CSS 1 06.03.2009 14:26
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32
div bereich nach anderen divs ausrichten pixel CSS 0 04.02.2007 00:49
Browser-Problem bei Positionierung von DIVs mickropixel CSS 3 20.09.2004 17:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:36 Uhr.