• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

fehler in css?

Status
Für weitere Antworten geschlossen.
W

web673

Neues Mitglied
hallo liebe html ler..

ich habe folgenden code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<link href="design.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">jkljkl
  <div class="oben">Willkommen</div>
  <div class="mitte">
    <p>Mitte</p>
    </div>
  <div class="unten"></div>
 </td>
</tr>
</table>
</body>
</html>
und mein css file
Code: 
.oben {
	width: 677px;
	margin: auto;
	background-image: url(ramen/oben.png);
	background-position: center;
	height: 30px;
}
.mitte {
	position: relative;
	width: 677px;
	text-align: center;
	margin: auto;
	background-image: url(ramen/mitte.png);
	background-repeat: repeat-y;
	background-position: center;
}
.unten {
	position: relative;
	width: 677px;
	text-align: center;
	margin: auto;
	height: 10px;
	background-image: url(ramen/unten.png);
	background-repeat: no-repeat;
}

im internetexplorer wird alles korrekt angezeigt..

aber wenn ich im ff schaue wird nach jedem div tag ein abstand angehängt.

wenn ich die <p></p> durch ein <br> ersetze funktioniert es..

hat wer eine idee ?
 
Code: 
* { margin: 0px; padding: 0px; }
schafft abhilfe!
 
GuMo Web,

aber warum brauchst du dort ne Tabelle?

Ich seh das so oft hier das ihr irgendwie versucht seid eure Layouts mit ner tabelle zu regeln, fast genauso oft sehe ich das in den Antworten geschrieben warum das sowas von Sinnbefreit ist das ich das gar nicht mehr erläutern mag.

sieh dir einfach mal das hier an, ohne anspruch auf perfektion

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thema-Semantik</title>

<link href="design.css" rel="stylesheet" type="text/css">
</head>

<body>


<h1 class="oben">jkljkl</h1>
<p class="mitte">Willkommen</p>
<p class="unten">Mitte</p>

</body>
</html>

Denn die Tabellen einfach durch div´s zu ersetzen ist genauso unnütz wie Tabellen selber, aber noch eine um die div´s herum? OMG;)
und wie du feststellen kannst hast so das gleiche ergebnis, nur mit deutlich weniger und übersichtlicherem code.
denn ein div ist vom element nix anderes als ein p oder h1-6, nämlich ein Blockelement, also warum nutzt du nicht erst die, die dir eh zur verfügung stehen bevor du welche dazu nimmst die für was anderes gedacht sind?
Code: 
*{
    font-size:1em;
    font-weight: normal;
    margin:0;
    padding:0;
    line-height: normal;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}
body{
    text-align:center;
    font-size:1em;
    font-style:normal;
}
.oben {
    width: 677px;
    margin: auto;
    background-image: url(ramen/oben.png);
    background-position: center;
    margin-top:30%;
}
.mitte {
    width: 677px;
    margin: auto;
    background-image: url(ramen/mitte.png);
    background-repeat: repeat-y;
    background-position: center;
}
.unten {
    width: 677px;
    margin: auto;
    background-image: url(ramen/unten.png);
    background-repeat: no-repeat;}
 
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">jkljkl
text
</td>
</tr>
</table>

geb das mal in eine leere html datei ein.. nun ist der text text horizontal und vertikal zentriert... deswegen.
 
web673 schrieb:
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">jkljkl
text
</td>
</tr>
</table>

geb das mal in eine leere html datei ein.. nun ist der text text horizontal und vertikal zentriert... deswegen.
Zum Vergrößern anklicken....

das mag ja sein, aber damit versuchst du grad ein Tabellenlayout zu erstellen, oder seh ich das Falsch?

Und Tabellen sind ja was tolles, aber halt nur für Tabellarische daten, und dann kannst du sie ohne weiteres auch mit der CSS datei weiter anpassen und brauchst keine style Angaben wie middle oder center im Quelltext
 
hi ich versuche kein tabellen layout zu erstellen


wenn du eine möglichkeit hast die der ie und der ff richtig darstellen kann mit der man bilder, div tags, und texte horizontal und vertikal zentrieren kann dann natürlich gerne her damit.


ich währe dir sehr dankbar

gruß web673
 
web673 schrieb:
hi ich versuche kein tabellen layout zu erstellen


wenn du eine möglichkeit hast die der ie und der ff richtig darstellen kann mit der man bilder, div tags, und texte horizontal und vertikal zentrieren kann dann natürlich gerne her damit.


ich währe dir sehr dankbar

gruß web673
Zum Vergrößern anklicken....

äähh, steh ich irgendwie auf dem Schlauch?
4posts weiter oben hab ich dir doch nen code gepostet der dir zeigt wie du alles in die mitte packen kannst.

Positionierung von bildern, text oder anderem wird ausschließlich über CSS geregelt.

Und das auch bei der verwendung von Tabellen.. ausgenommen du möchtest lieber keinen validen XHtml code schreiben, aber wer will schon altertümlich bleiben;)
 
danke für deine antwort ^^ ich hab das irgendwie zu schnell überflogen.


ich habe das jetzt so gemacht und was sehe ich ? es funktioniert ^^.

leider wird es in Dreamweaver CS3 nicht richtig dargestellt..... da sind überall ritze drinn...


gibts da auch n trick ?

danke dir
 
web673 schrieb:
danke für deine antwort ^^ ich hab das irgendwie zu schnell überflogen.
Zum Vergrößern anklicken....
wie jetzt? ich schreib mir hier nen wolf und du überfliegst es nur mal kurz um gleich neu zu posten das es nicht geht?


ich habe das jetzt so gemacht und was sehe ich ? es funktioniert ^^.
Zum Vergrößern anklicken....
Hoffe das wird dir ne lehre sein, Html hat nämlich auch was mit mal genauer hinsehen zu tun! Ganz besonders wenn CSS mit ins Spiel kommt. ;)
leider wird es in Dreamweaver CS3 nicht richtig dargestellt..... da sind überall ritze drinn...

gibts da auch n trick ?
Zum Vergrößern anklicken....
Aber was wird bei dir nicht richtig dargestellt in DW?

wenn du von code auf Entwurf gehst?

also ich kann da nix ungewöhnliches entdecken
danke dir
Zum Vergrößern anklicken....
immer gerne

gruß
csstester
 
sieht so aus:



html datei:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<link href="design.css" rel="stylesheet" type="text/css">

</head>

<body>

 <h1 class="oben">Willkommen</h1>
<p class="mitte">&nbsp;</p>
<p class="mitte">&nbsp;</p>
<p class="mitte">&nbsp;</p>
<p class="mitte">Dies ist der Test</p>
<p class="mitte">&nbsp;</p>
<p class="mitte">für testsiete</p>
<p class="mitte">&nbsp;</p>
<p class="mitte">&nbsp;</p>
<p class="mitte">&nbsp;</p>
<p class="unten">&nbsp;</p>
</body>
</html>
css datei:
Code: 
*{
    font-size:1em;
    font-weight: normal;
    margin:0;
    padding:0;
    line-height: normal;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}
body{
    text-align:center;
    font-size:1em;
    font-style:normal;
}
.oben {
    width: 677px;
    background-image: url(ramen/oben.png);
    background-position: center;
    margin-top:30%;
    height: 30px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.mitte {
    width: 677px;
    margin: auto;
    background-image: url(ramen/mitte.png);
    background-repeat: repeat-y;
    background-position: center;
    color: #CCCCCC;
}
.unten {
    width: 677px;
    margin: auto;
    background-image: url(ramen/unten.png);
    background-repeat: no-repeat;}
body {
    background-image: url(images/nestorfares.png);
    background-repeat: no-repeat;
}
 
Zuletzt bearbeitet von einem Moderator:
Sorry, aber den teil hatte ich nicht korrigiert.
müsste heißen
Code: 
.oben {
    width: 677px;
    background:url(rahmen/oben.png) no-repeat;
    margin-top:30%;
    height: 30px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.mitte {
    width: 677px;
    margin: auto;
    background:url(rahmen/mitte.png) repeat-y;
    color: #CCCCCC;
}
.unten {
    width: 677px;
    margin: auto;
    background:url(rahmen/unten.png) no-repeat;
 
wird noch immer nicht in der entwurfsansicht richtig angezeigt. aber ist auch net so schlimm das wichtigste ist ja das es im web überall richtig ist.

danke dir und allen die noch geschrieben haben
 
web 673

Bitte keine Bilder im Forum posten, die das Design "sprengen", sondern lediglich darauf verlinken.
Bild entfernt.
Danke.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben