Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 25.06.2008, 12:43
sjBlack sjBlack ist offline
Benutzer
neuer user
 
Registriert seit: 29.04.2008
Beiträge: 56
sjBlack ist in Verruf geraten
Standard

ehm du hättest das wenigstens lesbarer einrücken können und was soll bspweise das?

Zitat:
Hersteller:&nbsp;<form
hier musst du kein leerzeichen schützen

und wieso gottes hält sich keiner daran?: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Zitat:
Stell einen kompletten, lauffähigen Code ein, der einen das Problem sicher nachvollziehen lässt und der dabei auf Überflüssiges verzichtet.
das weniger wichtige drum herum lenkt mich bspweise stark ab. sicher gibts hier echte draufgänge, die da locker die übersicht behalten. um diese uhrzeit bin aber scheinbar grad nur ich unterwegs lol

Zitat:
<!-- <div class="smallText">Zeige <b>1</b> bis <b>4</b> (von insgesamt <b>32</b> Artikeln)</div> -->
das musste ich auch extra entfernen.

Zitat:
<div class="smallText"
nicht sinngemäße namensgebung. überhaupt transitional source...

poste doch mal bloß den quelltext mit den paar div mit jeweils paar wörtern or so.

Zitat:
class="productListing-container left">
seit wann sind leerzeichen in klassennamen erlaubt? benutz außerdem tabs zum einrüken. wesentlich lesbarer und spart zeichen.

Zitat:
</b>&nbsp;&nbsp;<a
das tut so wrh! verdammt! das tut so dermaßen weh! müssen es unbedingt 2 leerzeichen sein?

Zitat:
title=" Seite 2 "
wozu die leerzeichen im attributwert? echt lesbarer?

Zitat:
">[n&auml;chste&nbsp;&gt;&gt;]</
omfg..

Zitat:
<p>...</p>

<br />
<ul>
OMFG!!!

Zitat:
<hr class="seperator" />
<br />
du bringst mich um...

Zitat:
<span class="productListing_button"><a href="#"><img src="button_buy.gif" alt="" width="100" height="20" /></a></span>
GERADE HIER MACHT DER ALTERNATIVTEXT DEN MEIßTEN SINN! was wenn die grafik mal fehlt geblokt wird oder sonst was. soll dann stattdessen nix rein?

Zitat:
<span class="productListing_button"><a href="#"><img src="button_buy.gif" alt="KAUFEN" width="100" height="20" /></a></span>

ich glaub dir fehltn nd tag von wrap. bei der einrückung kanns ja nich auffallen.-

wieso sollen bei dir horizontale trennlinien allgemein floaten? (/* common css*/)

Zitat:
div, td
{
text-align: left;
background-color: transparent;
}
holla. auvhch in common css


dein komplettes layout hängt davon ab, dass der wrapper jmmer gleich bleibt und es im optisch mittigem div zu keinem
overflow kommt. diese komplette layoutart wird auf sämtlichen css seiten die ich kenne 100% abempfohlen.



Zitat:
<div class="right">
<div class="smallText" align="right">
Seiten: <b>1</b> <a href="#" class="pageResults" title="Seite 2">2</a>
<a href="#" class="pageResults" title="Seite 3">3</a>
<a href="#" class="pageResults" title="Seite 4">4</a>
<a href="#" class="pageResults" title="Seite 5">5</a>
<a href="#" class="pageResults" title="Nächste5 Seiten ">...</a>
<a href="#" class="pageResults" title="nächste Seite">[ nächste ]</a>
</div>
</div>
du benutzt einen extra div nur zum übergeben einer textrchtung und schriftgröße. kannst du das nicht einfach <div class="right"> geben? was das ist bloß die isolierte version und das hat nochn andern sinn im eigentlichen? scheint nich so, als wäre hier irgendwas isoliert.


Zitat:
/*------------------------*/
/*------- special --------*/
/*------------------------*/


.seperator {
margin-top:15px;
margin-bottom:15px;
border:0;
border-top: 1px dashed #999;
}

.left {
float: left;
}

.right {
float: right;
}
alles klar.

dein right div ist innerhalb vom content div notiert, weshalb sich seine x-koordinaten an dem content div ausrichten
http://simpleml.bplaced.net/css_floa...ung_der_Floats

Zitat:
Nur der IE6 macht Probleme (welch Überaschung )
ie macht bei mir komplett woanders probleme.


Zitat:
Die Auswahl "Hersteller" sollen links und die Seitennavigation rechts stehen.
wo links und rreechts? meinst du vll

Die Auswahl Hersteller soll links um die content div angezeigt werden und die seitennavigation rechts um den content div? sag dann auch gleich unter

Zitat:
<div id="leftimage">
{LINKE SPALTE}
</div>
Zitat:
.clr{
clear: both;
height: 0;
}
das bringts auch voll

Zitat:
<div id="mainmenu">
#mainmenu
</div>

<div id="header">
#header
</div>

<div class="clr">test</div>
wozu brauchst du nen clearing div nach 2 div im normalen fluss?


Zitat:
<div id="quick">
<div id="quick_box_left"></div>
<div id="quick_box_middle"></div>
<div id="quick_box_right"></div>
</div>

<div class="clr"></div>
das verwirrt man.

Zitat:
<div id="quick">
<div id="quick_box_left"></div>
<div id="quick_box_middle"></div>
<div id="quick_box_right"></div>

<div class="clr"></div>
</div>
so herum isses bei ner korekten auslegung richtig.

Zitat:
#quick_box_left {
color: white;
background: #0A0;
background-image:url(...);
background-repeat:no-repeat;
background-position: right;
width:30%;
height:20px;
padding:15px;
float:left;
text-align: center;
}

#quick_box_middle {
color: white;
background: #0C0;
width:30%;
height:20px;
padding:15px;
float:left;
text-align: center;
}

#quick_box_right {
color: white;
background: #0A0;
background-image:url(...);
background-repeat:no-repeat;
background-position: left;
width:30%;
height:20px;
padding:15px;
float:left;
text-align: center;
vertical-align: middle;
}
jetzt erkennt man schon eher was.

Zitat:
width: 85%;
min-width: 950px;
max-width: 1200px;
ds verstehe ich nich so recht.


isolier das nochmal richtig und poste es neu. glaube nicht, dass irgendwer lust hat, deinen fehler zu finden. allerdings kann ich mir doch vorstellen, dass heiko_rs einen kurzen blick reinwirft und mit einem satz aus 3 worten das komplette problem löst. xDDD


wozu gibst du #quick 50px höhe, wenn seine horizontal aneinanderzureihende kindelemente alle in 20px höhe dargestellt werden sollen. ist die freistehende hintergrundfarbe so schön?

wieso gibst du #quick_box_left, #quick_box_right und #quick_box_middle überhaupt eine höhe? gb ihnen etwas innenabstand zum inhaltstext und lass sie so groß sein wie der inhaltstext es verlangtt.,. riskierst du auch keinen vertikalen overflow und hast nicht mit dem height|min-height-problem im ie zu kämpfen.

noch was zu deinem zeichensatz
Zitat:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
nimm westeuropäische kodierung
Zitat:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
musst du nicht jedes einzelne verdammt umlaut referenzieren.

Zitat:
Die Auswahl "Hersteller" sollen links und die Seitennavigation rechts stehen.
merk ich nix von bzw nach dem ich den source umgekrempelt habe.

http://simpleml.bplaced.net/_probs/d...tenproblem.htm

Code:
<!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" />
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	<title>Unbenanntes Dokument</title>
</head>
<body>

<div class="wrap">
	<div id="mainmenu">
		#mainmenu
	</div>
    
	<div id="header">
		#header
	</div>

	<div id="quick">
		<div id="quick_box_left"></div>
		<div id="quick_box_middle"></div>
		<div id="quick_box_right"></div>

		<div class="clr"></div>
	</div>

	<div id="leftimage">	
		#leftimage	
	</div>

	<div id="rightimage">   
		#rightimage
	</div>	

	<div id="content">
    		#content

		<div class="productListing">
			<div>
				Hersteller:
				<form id="filter" action="index.php" method="get">
					<input type="hidden" name="cat" value="c397.html" />
					<input type="hidden" name="sort" value="" />
					<input type="hidden" name="id" value="ebcade1ce1c42a17a22d95d8b98c8641" />
					<select name="filter_id" onchange="this.form.submit()">
						<option value="" selected="selected">Alle</option>
						<option value="51">1</option>
					</select>
				</form>
		</div>
				
    		<div class="right">
			<div class="smallText" align="right">
				Seiten: <b>1</b> <a href="#" class="pageResults" title="Seite 2">2</a>
				<a href="#" class="pageResults" title="Seite 3">3</a>
				<a href="#" class="pageResults" title="Seite 4">4</a>
				<a href="#" class="pageResults" title="Seite 5">5</a>
				<a href="#" class="pageResults" title="Nächste5 Seiten ">...</a>
				<a href="#" class="pageResults" title="nächste Seite">[ nächste ]</a>
			</div>
		</div>

		<div class="productListing-container left">
       		<h1 class="productListing-heading"><a href="#">{PRODUCT}</a></h1>

			<div class="productListing-box" style="width: 150px;">
				<!-- Product Image-->
				<img src="0910149-01.jpg" alt="" width="120" height="120"/>						
			</div>
	
			<div class="productListing-box">
				<p>keine ahnung, was hier rein soll</p>

				<ul>
					<li>bla1</li>
					<li>bla2</li>
					<li>bla3</li> 
				</ul>
			</div>
  
			<div>
				<hr class="seperator" />

	        		<p>
					<span class="productListing-price"><strong>Ab  14.50 EUR</strong></span>
					<span class="productListing_button"><a href="#"><img src="button_buy.gif" alt="kaufen" width="100" height="20" /></a></span>
				</p>
			</div>
		</div>

		<div class="productListing-container left">
       		<h1 class="productListing-heading"><a href="#">{PRODUCT}</a></h1>

			<div class="productListing-box" style="width: 150px;">
				<!-- Product Image-->
				<img src="0910149-01.jpg" alt="" width="120" height="120"/>						
			</div>
	
			<div class="productListing-box">
				<p>keine ahnung, was hier rein soll</p>

				<ul>
					<li>bla1</li>
					<li>bla2</li>
					<li>bla3</li> 
				</ul>
			</div>
  
			<div>
				<hr class="seperator" />

	        		<p>
					<span class="productListing-price"><strong>Ab  14.50 EUR</strong></span>
					<span class="productListing_button"><a href="#"><img src="button_buy.gif" alt="kaufen" width="100" height="20" /></a></span>
				</p>
			</div>
		</div>

		<div class="clr"></div>
	</div>
</div>

<div id="footer">
    <div>#footer div</div>        
</div>

</body>
</html>
http://simpleml.bplaced.net/_probs/stylesheet.css

stylesheet war nicht zu retten, ohne es komplett neu schreiben zu müssen.

Code:
/*------------------------*/
/*------ common css ------*/  
/*------------------------*/

*
{
	margin: 0;
	padding: 0;
	border: 0;
}
	
body {font: 11px Verdana, Arial, sans-serif;}

div, td
{
	text-align: left;
	background-color: transparent;
}	

hr {
	border-bottom: 1px #ccc solid;
	float: left;
	width: 100%;
}


/*------------------------*/
/*-------- Layout --------*/   
/*------------------------*/

.wrap {
	width: 85%;
	min-width: 950px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	background-color: White;
	color: Black;
	border-bottom: 2px black solid;
}

#mainmenu {
	height: 57px;
	background:	#666;
	text-align: center;
}


#header {
	height:200px;
	background:	#AAA; /* GIB WENIGSTENS DEM HEADER NE HINTERGRUNDFARBE DAMIT MAN WAS SIEHT ARGH!!! */
	border-top:2px solid white;
}

#quick {
	font-size: 11px;
	background-image:url(tpl_img/nav.gif);
	background-repeat:repeat-x;
	background-color: black;
	border-bottom:2px solid white;
	border-top:2px solid white;
}

#quick a {
	color: White;
}


/* damit man sie sieht */
#quick_box_left {
	color: white;
	background: #090;
	width: 30%;
	height: 20px;
	float:left;
	text-align: center;
}

#quick_box_middle {
	color: white;
	background: #0B0;
	width: 30%;
	height: 20px;
	float: left;
	text-align: center;
}

#quick_box_right {
	color: white;
	background: #090;
	width: 30%;
	height: 20px;
	float: left;
	text-align: center;
	vertical-align: middle;
}

#rightimage {
	float:right;
	width:160px;
	background-color:#e3e3e3;
}

#leftimage {
	float:left;
	width:280px;
	background-color:#e3e3e3;
}

#content {
	background-color:white;
	line-height: 16px;
	min-width:400px;
	margin-left:300px!important;
	/*IE6*/margin-left:295px;
	margin-right:180px!important;
	/*IE6*/margin-right:175px;	
}


#footer {
	clear:both;
	height:212px;
	width: 100%;
	padding-top:5px;
	text-align:center;
	font-size:11px;
}


/*-------------------------------------*/
/*----- product_listing_vX.html -------*/
/*-------------------------------------*/

.productListing {
	width:100%;
}

.productListing-container {
	background-color:#eee;
	border: 1px dashed #999999;
	vertical-align:top;
	padding:15px;
	margin-bottom:5px;
	margin-top:5px;
	float: left;
}		

.productListing-container  li {
	margin-left:15px;
} 

.productListing-heading {
	font-size: 12px;
	color: #000;
	background-color:#f7f7f7;
	font-weight: bold;
	margin:-15px;
	padding:0;
	margin-bottom:13px;
	padding:8px;
	border-bottom: 1px dashed #999999;
}

.productListing-box {
	float:left;
	width:280px;
}

.productListing-info {
	font-size:9px;
}

.productListing-price {
	font-size:12px;
	float:left;
	width:40%;
	text-align:center;
}

.productListing_button {
	float:right;
	width:40%;
	text-align:center;
}


/*------------------------*/
/*------- special --------*/
/*------------------------*/


.seperator {
	margin-top:15px;
	margin-bottom:15px;
	border:0;
	border-top: 1px dashed #999;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center {
	text-align: center;
}

div.clr {clear: both;}
sowie die klassennamen im html quelltext

Geändert von sjBlack (25.06.2008 um 14:02 Uhr)
Mit Zitat antworten
Sponsored Links