Vorheriges Thema anzeigen :: Nchstes Thema anzeigen |
Autor |
Nachricht |
Kenne Mitglied
Angemeldet: 15.05.2006 Beitrge: 70 Wohnort: Berlin Interessen: Interessen zu haben...
|
Verfasst am: 12.10.2006, 15:12 Titel:
Problem bei ausrichtung einer grafik mit CSS |
|
|
|
|
hey ja wie der Titel es schon sagt habe ich Problem bei der ausrichtung meines Headers sowie der Navi...
Ich versuche es schon seit ca.2 std. aber ich komme nicht weiter! Selbst mein schlaues "Css-Buch" welches ich mir gekauft habe(!!!) bringt mich nicht weiter...
hier mal ein screen(nicht ershcrecken wegen den farben ist ja nur zur veranschaulichung): http://home.arcor.de/dettasilvi/scr.GIF
und hier mal der Code:
Code: |
CSS
body {
margin:0;
padding:0;
background-color:#242424;
background-repeat:repeat-y;
background-position:center;
background-image:url(../Images/vertbg.jpg);
}
div#content {
width:561px;
margin:auto;
}
span#header {
width:561px;
height:156px;
display:block;
background-repeat:no-repeat;
background-image:url(../Images/header.jpg);
}
ul.navi {
margin:0;
padding:0;
list-style-type:none;
}
ul.navi li {
float:left;
}
.navi a {
display:block;
text-decoration:none;
}
a#navi_home {
width:99px;
height:25px;
background-image:url(../Images/navi_home.jpg);
}
a#navi_about {
width:99px;
height:25px;
background-image:url(../Images/navi_about.jpg);
}
a#navi_art {
width:114px;
height:25px;
background-image:url(../Images/navi_art.jpg);
}
a#navi_tutorials {
width:123px;
height:25px;
background-image:url(../Images/navi_tutorials.jpg);
}
|
Code: |
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Meine Seite</title>
<link rel="stylesheet" type="text/css" media="screen" href="./inc/style.css" />
</head>
<body>
<div id="content">
<span id="header"> </span>
</div>
<ul class="navi">
<li><a href="#" id="navi_home"> </a></li>
<li><a href="#" id="navi_about"> </a></li>
<li><a href="#" id="navi_art"> </a></li>
<li><a href="#" id="navi_tutorials"> </a></li>
</ul>
</body>
</html>
|
so nun hoffe ich auf eure hilfe denn ich komm nichtmehr klar...
es knnen auch sonstige nderungen vorgeschlagen werden
Kenne |
|
Nach oben |
|
|
Impi Mitglied
Angemeldet: 06.05.2006 Beitrge: 530
|
Verfasst am: 12.10.2006, 21:14 Titel:
|
|
|
|
|
Use tables n' be </invalid>!
Dann klappts auch mit der Darstellung.
Impi |
|
Nach oben |
|
|
Kenne Mitglied
Angemeldet: 15.05.2006 Beitrge: 70 Wohnort: Berlin Interessen: Interessen zu haben...
|
|
Nach oben |
|
|
bl:nd Moderator
Angemeldet: 04.06.2004 Beitrge: 3499
|
Verfasst am: 12.10.2006, 23:00 Titel:
|
|
|
|
|
Tabellen waren ursprnglich nie fr das Layouten von Internetseiten gedacht - deine Einstellung, dich von Anfang an von Tabellen fernzuhalten und mit CSS zu arbeiten ist also auf jeden Fall richtig, halt da ruhig dran fest und lass dich wegen ein paar kleinen Problemen nicht gleich unterkriegen. Das schlussendlich Ergebnis wird definitv besser sein, wenn du CSS mal richtig im Griff hast.
Zu deinem vorliegenden Problem: Deine Navigation hast du so definiert, dass die links keinen Abstand hat (margin: 0) - nur packst du die ganze Liste mit den Navigationspunkten dann ja nicht in deinen Content-Div sondern drunter - er richtet sie also statt am linken Rand des Contents am linken Rand der Seite aus. nder das mal, dann sollte die Navigation auch dort sein, wo sie hingehrt.
(Sollte ich hier gerade irgendwas bersehen und infolge dessen allzu groen Bullshit erzhlt haben, seht es mir nach - bin eigentlich gerade schon auf dem Weg ins Bett und in Gedanken ganz wo anders... ) |
|
Nach oben |
|
|
Kenne Mitglied
Angemeldet: 15.05.2006 Beitrge: 70 Wohnort: Berlin Interessen: Interessen zu haben...
|
Verfasst am: 12.10.2006, 23:13 Titel:
|
|
|
|
|
sooo den header habe ich jetzt einigermaen hinbekommen und die navie habe ich weiter in die mitte bekommen aber es gibt immernoch ein problemchen...
hier ein screen:
http://home.arcor.de/dettasilvi/scre.GIF
leider siehts nur im dreamweaver so nicht im opera oder im IE!?
und der Code dazu:
CSS
Code: |
body {
margin:0;
padding:0;
background-color:#242424;
background-repeat:repeat-y;
background-position:center;
background-image:url(../Images/vertbg.jpg);
}
div#content {
width:561px;
margin-left:117px;
}
span#header {
width:561px;
height:156px;
display:block;
background-repeat:no-repeat;
background-image:url(../Images/header.jpg);
}
ul.navi {
margin-left:180px;
padding:0;
list-style-type:none;
}
ul.navi li {
float:left;
}
.navi a {
display:block;
text-decoration:none;
}
a#navi_home {
width:99px;
height:25px;
background-image:url(../Images/navi_home.jpg);
}
a#navi_about {
width:99px;
height:25px;
background-image:url(../Images/navi_about.jpg);
}
a#navi_art {
width:114px;
height:25px;
background-image:url(../Images/navi_art.jpg);
}
a#navi_tutorials {
width:123px;
height:25px;
background-image:url(../Images/navi_tutorials.jpg);
}
|
der Html Code bleibt derselbe... |
|
Nach oben |
|
|
Kenne Mitglied
Angemeldet: 15.05.2006 Beitrge: 70 Wohnort: Berlin Interessen: Interessen zu haben...
|
Verfasst am: 15.10.2006, 21:25 Titel:
|
|
|
|
|
Hat denn sonst keiner ne ahnung ich bekomms nicht...egal was ich tue..
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
|