nicht angemeldet
div layer nebeneinander
Hallo!
Nachdem ich neulich ein Tutorial gelesen habe wie man Webseiten ohne Tabellen, mithilfe von css, erstellen kann hab ich mich gleich mal daran gemacht.
Ich habe einen zentrieren layer, dessen Hintergrund, das Logo und menü beinhaltet.
Auf diesen Hintergrund habe ich einen layer "navi" positioniert mit ein paar links. So jetzt möchte ich neben diesen layer einen weiteren setzen )"navi2") und noch einen link einfügen, jedoch lässt sich dieser layer partout nicht neben den anderen setzen.
hier der code:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">
<div id="navi">
<p><a>text</a></p>
<p><a href="banner.jpg" class="navi">link</a></p>
<p><a href="banner.jpg" class="navi">link</a></p>
<p><a href="banner.jpg" class="navi">link</a></p>
</div>
<div id="navi2">sollte rechts neben "text" erscheinen </div>
</div>
</body>
</html>
und hier die CSS:
/* CSS Document */
body {
padding : 0;
margin : 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
p {
margin: 4px;
}
#banner {
width: 811px;
height: 100px;
margin: 0 auto;
background-image: url(banner.jpg);
background-repeat: no-repeat;
}
#navi {
padding: 1px;
width: 80px;
height: 60px;
position: relative;
top: 19px;
left: 12px;
text-align: center;
}
#navi2 {
width: 30px;
height: 10px;
position: relative;
top: 19px;
left: 93px;
text-align: left;
}
.navi:link {color:#FFFFFF; text-decoration:none}
.navi:visited {color:#FFFFFF; text-decoration:none}
.navi:active {color:#FF9900; text-decoration:none}
.navi:hover {color:#FFCC66; text-decoration:none}
hier is der link zur seite:
http://home.arcor.de/fesak/html/
Ein weiteres kleines Problemchen wäre das die layer bei firefox und iexplorer immer um ein paar pixel unterschiedlich positioniert werden.
Also beim iexplorer rutscht der layer immer 2-3 pixel nach unten.
Bedanke für mich schonmal im vorraus für freundliche Hilfe.
mfg. ak
-
Hallo fesak,
CSS statt Tabellen fürs Layout zu benutzen ist schonmal sehr löblich. Es nutzt aber wenig, wenn man weiterhin HTML-Elemente zweckentfremdet.
<div id="navi">
<p><a>text</a></p>
<p><a href="banner.jpg" class="navi">link</a></p>
<p><a href="banner.jpg" class="navi">link</a></p>
<p><a href="banner.jpg" class="navi">link</a></p>
</div>Das hier sind keine Textabsätze, sondern Links und zwar eine ganze Liste davon. Die entsprechenden HTML-Elemente sind also <ul> und <li>. Dieser Anker ohne Ziel soll wohl eine Art Überschrift darstellen, also <hx>, je nachdem welcher Ordnung.
font-size: 9px;
Was soll denn das sein? 9px ist viel zu klein, das kann ja kein Mensch lesen. Und dadurch, dass du px als Einheit verwendest, können Benutzer des IE die Schrift nicht einmal vergrößern. Verwende em, Prozent oder verzichte ganz auf eine Angabe.
width: 811px;
Muss es denn wirklich eine feste Breite sein? Warum lässt du diese Angabe nicht weg und nimmst den ganzen Platz, den dir der Viewport des Besuchers lässt?
position: relative;
top: 19px;
left: 12px;Relative Positionierung halte ich hier für völlig fehl am Platze. Sie verschiebt das Element um die gegebenen Maße von dem Platz wo es normalerweise stände, hält diesen aber trotzdem frei.
width: 30px;
height: 10px;Also echt, was bitte willst du in 30x10px quetschen?
position: relative;
top: 19px;
left: 93px;Und hier wieder relative Positionierung und wieder ist sie völlig ungeeignet. #navi hält den ursprünglichen Platz ja frei, also steht #navi2 immer noch unter(!) ihm. Es nach unten und nach rechts zu verschieben bringt es also nicht neben(!) #navi.
.navi:link {color:#FFFFFF; text-decoration:none}
.navi:visited {color:#FFFFFF; text-decoration:none}Die optische Unterscheidung von besuchten und unbesuchten Links ist eine wichtige Orientierungshilfe, warum nimmst du sie dem Besucher weg?
[Verweise richtig einbinden](http://home.arcor.de/fesak/html/}
[link:http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden)
Ein weiteres kleines Problemchen wäre das die layer bei firefox und iexplorer immer um ein paar pixel unterschiedlich positioniert werden.
100% pixelgenaue Positionierung ist praktisch unmöglich, da jeder Browser so seine kleinen Macken hat wodurch dieses Ziel nie erreicht werden kann. Verabschiede dich von der Idee alles pixelgenau festzuzementieren, das wird dir in Zukunft noch einige Probleme und viel Aufregung ersparen.
Es würde mich wirklich mal interessieren in welchem Tutorial du diesen Quatsch gelernt hast. SELFHTML bietet doch so eine schöne Einführung in das Thema der CSS-basierten Layouts! Les dir das alles durch und dann fange noch einmal von vorn an mit deinem Layout. Ich bin mir sicher, dass dann auch die Frage wie du zwei Elemente neben(!)einander bekommst (Stichwort float) geklärt ist.
Gruss,
OhneName-
hi,
versuch mal den css code hier:
##############################################/* CSS Document */
body {
padding : 0;
margin : 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}p {
margin: 4px;
}#banner {
width: 811px;
height: 100px;
margin: 0 auto;
background-image: url(banner.jpg);
background-repeat: no-repeat;
}#navi {
float:left;
padding: 1px;
width: 80px;
height: 60px;
position: relative;
top: 19px;
left: 12px;
text-align: center;
}#navi2 {
float:left;
width: 130px;
height: 10px;
position: relative;
top: 19px;
left: 93px;
text-align: left;
}.navi:link {color:#FFFFFF; text-decoration:none}
.navi:visited {color:#FFFFFF; text-decoration:none}
.navi:active {color:#FF9900; text-decoration:none}
.navi:hover {color:#FFCC66; text-decoration:none}#################################################
p.s.: das zauberwort in deinem falle heisst 'float:left;'
cu
kai
-