Problem mit Textposition
- Ersteller Heizung
- Erstellt am
Das sieht stark nach einem Tabellen-Layout aus. Somit missbrauchst Du eine Tabelle für etwas wofür sie nicht gedacht sind. Tabellen sind nur für tabellarische Daten gedacht. Hast Du tabellarische Daten? Sieht mir nicht so danach aus.
Die Lösung für dein Problem wäre wie auch die Ablösung deines Tabellen-Layouts CSS. Genauer gesagt:
Die Lösung für dein Problem wäre wie auch die Ablösung deines Tabellen-Layouts CSS. Genauer gesagt:
Code:
vertical-align: top;Hmm k habe mich mal drangesetz das jetzt mit CSS zu machen.
Aber da ich noch nie mit CSS gearbeitet habe habe ich da paar Probleme.
Wie mache ich es jetzt das der Border einmal um alles rum geht? Also das das wie der Rand ist so wie auf dem ersten Bild der rote Rand.
Hier mein Code
Aber da ich noch nie mit CSS gearbeitet habe habe ich da paar Probleme.
Wie mache ich es jetzt das der Border einmal um alles rum geht? Also das das wie der Rand ist so wie auf dem ersten Bild der rote Rand.
Hier mein Code
HTML:
<html>
<head>
<style type="text/css">
#border
{
border:6px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:60px;
-khtml-border-radius:60px;
width: 800px;
background: white;
}
#header
{
position:absolute;
top: 50px;
left: 50px;
background: ;
padding: 20px 20px 20px 80px;
width: 800px;
height: 200px;
}
#navi
{
position:absolute;
top: 300px;
background: ;
padding: 20px 20px 20px 80px;
margin: 20px 10px 10px 10px;
width: 300px;
}
#content
{
position:absolute;
background: ;
padding: 20px 20px 20px 80px;
margin: 300px 40px 10px 200px;
width: 600px;
}
#body
{
border: solid blue 6px
}
</style>
<title>
Snooze
</title>
</head>
<body bgcolor="#cccccc">
<!-- Border -->
<div id="border">
<!-- Border -->
<!-- Header -->
<div id="header">
<p> <img src="Logo.png" /> <img src="Snooze.png" /> </p>
</div>
<!-- Header -->
<!-- Navigation -->
<div id="navi">
<ul>
<li><a href="index.html"> Home </a>
<li><a href="grafiken.html"> Grafiken </a>
<li><a href="teeworlds.html"> Teeworlds </a>
<li><a href="trackmania.html"> Trackmania </a>
<li><a href="racinglive.html"> Racing Live </a>
<li><a href="diablo2.html"> Diablo 2 </a>
<li><a href="partner.html"> Partner </a>
<li><a href="kontakt.php"> Kontakt </a>
<li><a href="impressum.html"> Impressum </a>
</ul>
</div>
<!-- Navigation -->
<!-- Content -->
<div id="content">
<p> Hier steht nachher der Inhalt der Seite. </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<!-- Content -->
</body>
</html>Am Besten für jede Rundung eine Grafik in der entsprechenden Größe erstellen und absolut positioniert einfügen. Wenn Du auf die Unterstützung für ältere Browser verzichten willst, kannst Du auch border-radius verwenden (was du ja scheinbar schon gemacht hast), aber wie gesagt kann das lange nicht jeder Browser.