zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden horizontale Navigationsleiste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.10.2010, 12:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2010
Beiträge: 4
Kaykay befindet sich auf einem aufstrebenden Ast
Unglücklich horizontale Navigationsleiste

guten morgen
ich hab ein paar probleme mit meiner website... irgendwie bekomm ich meine div-container nicht positioniert! Außerdem verrutscht meine Navigationsleiste auch ständig.
Ich möchte das bild "print_pic4.png" als hintergrund, oben links auf dem bild sitzt (sollte) meine navigationsleiste. rechts unten auf dem bild soll eine reihe von links stehen und links daneben text.
Nun habe ich das Problem, dass alles verschoben ist, der Text plötzlich hinter dem Bild liegt, die Links rechts unten auf einmal jeweils 2-zeilig sind (der pdf link soll eigentlich direkt nach "link1", "link2" usw. stehen).

Irgendwie ist da mittlerweile der wurm drin ich bin etwas verzweifelt.
Es wäre super, wenn mir einer von euch beim auseinanderklabüstern helfen könnte oder ein paar tipps hat, denn irgendwie ist hier einiges schief gelaufen.
VIELEN DANK!
lg kaykay

<!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=UTF-8" />
<title>name</title>
<link href="name.css" rel="stylesheet" type="text/css" />
<style>
#box1 {
background-image: url(print_pic4.png);
text-align: left;
width: 1024px;
clip: rect(auto,auto,auto,auto);
background-repeat: no-repeat;
height: 450px;
position: relative;
float: left;
z-index: 0;
bottom: 30px;
text-decoration: none;
}
.Target {
color: #9acd32;
padding-left: 50px;
}

a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #999999;
word-spacing: 100px;
text-align: left;
textdecoration: none;
width: 500px;
display: block;
}

a:hover {
color:#9acd32;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

a:link {
text-decoration:none;

}

.Navi_class {
clip: rect(auto,auto,auto,auto);
text-decoration: none;
display: block;
float: left;
height: 35px;
width: 35px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
list-style-position: outside;
clear: none;
padding-top: 9px;
padding-right: 5px;
padding-left: 45px;
margin: 0px;
}
#gesamt #Hinweis {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 600;
text-decoration: none;
display: inline;
word-spacing: 10px;
position: relative;
top: 20px;
left: 60px;
color: #999999;
text-align: left;
}
.links {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 500;
color: #9acd32;
text-decoration: none;
letter-spacing: normal;
word-spacing: normal;
}


#Navi {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
text-align: left;
position: relative;
height: 60px;
width: 600px;
text-decoration: none;
top: 90px;
z-index: 10;
margin-right: 50px;
float: left;
padding-top: 20px;
right: 20px;
list-style-position: inside;
list-style-type: none;
}
#Logo {
position: relative;
clear: right;
float: right;
height: 80px;
width: 380px;
top: 30px;
visibility: visible;
z-index: 25;
right: 20px;
}
#gesamt #links {
clear: right;
float: right;
width: 210px;
position: relative;
height: 110px;
font-family: Arial, Helvetica, sans-serif;
line-height: 16px;
text-align: left;
text-decoration: none;
bottom: 210px;
right: 100px;
}
#gesamt #text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-decoration: none;
width: 500px;
top: 375px;
position: relative;
z-index: 80;
right: 610px;
visibility: visible;
}
span {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #999999;
text-decoration: none;
text-align: left;
list-style-position: inside;
list-style-type: none;
}
#gesamt {
height: 768px;
width: 1024px;
clear: left;
float: left;
position: relative;
left: -20px;
top: -20px;
z-index: 10;
}
#gesamt #contact {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 600;
color: #999999;
text-align: left;
height: 20px;
width: 500px;
position: relative;
top: 550px;
left: 150px;
text-decoration: none;
float: left;
visibility: visible;
clear: left;
white-space: nowrap;
}
.img_navi {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 600;
color: #999999;
float: left;
width: 80px;
position: relative;
visibility: visible;
left: 60px;
top: 40px;
text-decoration: none;
z-index: 26;
white-space: nowrap;
}
.Link_class {
float: left;
padding-top: 20px;
list-style-position: inside;
list-style-type: none;
display: block;
}
#gesamt #Navi li {
text-decoration: none;
list-style-type: none;
list-style-position: inside;
display: inline;
position: relative;
word-spacing: 10em;
white-space: nowrap;
}
ul {
list-style-position: inside;
list-style-type: none;
display: inline;
}
</style>
</head>

<body>
<div id="gesamt">



<div id="Logo"> <img src="logo.png" /> </div>
<div id="Hinweis"> Name blabla </div>

<div id="Navi">

<ul>
<li><a href="#"><img src="bild1.png" width="46" height="46" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt1</span> </a></li>
<li><a href="#"><img src="bild2.png" width="47" height="47" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt2 </span></a> </li>
<li><a href="#"><img src="bild3_grau.png" width="43" height="43" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt3</span> </a> </li>
<li><a href="#"><img src="bild4_grau.png" width="41" height="41" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt4 </span></a></li>
</ul></div>
<div id="text">
<span class="Target">&gt; Punkt1</span> Hier steht Text<br />
<br />

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. <br /><br />

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. </div>


<div id="box1" style="float: center; background"> </div>
<div id="links">
<span> more details: </span>
<br />
<span>
&gt; link1<a href="#" class="links"> &gt; pdf </a><br />
&gt; link2<a href="#" class="links"> &gt; pdf</a> <br />
&gt; link3<a href="#" class="links"> &gt; pdf </a> <br />
&gt; link4<a href="#" class="links"> &gt; pdf </a> <br />
&gt; link5<a href="#" class="links"> &gt; pdf</a> <br />
</span> </div>
<div id="contact"> <a href="#"> Kontakt </a> <a href="#">Linklink</a> <a href="#">nochnLink</a> </div>
</div>


</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.11.2010, 16:04
PHP User
neuer user
 
Registriert seit: 11.08.2010
Beiträge: 26
PeeGee befindet sich auf einem aufstrebenden Ast
Standard

Für solche Fälle gibt es die Code Tags bei der Text eingabe....
__________________
http://peegee84.deviantart.com
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.11.2010, 21:02
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

oder noch besser ist da immer ein Link zur Seite.
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
  #4 (permalink)  
Alt 04.11.2010, 09:41
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.221
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

Bitte um Link!
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
Mit Zitat antworten
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
Dynamische Navigationsleiste horizontal, vertikal Faven CSS 6 28.06.2010 16:06
horizontale Navigationsleiste Tobe CSS 0 20.07.2008 11:34
Horizontale Navigationsleiste Marco D. CSS 10 19.08.2007 11:55
Mitwachsende horizontale Navigationsleiste und Schriftarten boxi CSS 1 17.04.2006 18:24
mit <li> horizontale navigationsleiste oimelchen CSS 17 26.10.2005 20:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:28 Uhr.