2 fragen (ff, bild)

n0b0dy

ich hab 2 probleme
1. jedes kästchen sollte gleich lang sein, es geht beim ie
beim ff werden die kästchen nur so lang wie das wort .

2. ich möchte unter dem <hr> tag ein hintergrundbild einfügen

bitte helft mir, sorry das ich euch nerve aber ich
mach das noch nicht so lange.
also danke schon im voraus.

das ist der qt:

<html>

body {
scrollbar-face-color: 000000;
scrollbar-shadow-color: ff0000;
scrollbar-highlight-color:ff0000;
scrollbar-3dlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-track-color:000000;
scrollbar-arrow-color:ff0000; }
</style>

#navi {
margin:auto;
width: 800px;
}

body {text-align:center
}

body {
font-family:arial,sans-serif;
font-size:10pt;
}

body {
background-color: #000000;
}
a:link, a:visited, a:active, a:focus {
color:#ff0000;
text-decoration: none;
}

a.cssmenu:link {
width : 100px;
color : black;
background-color : #ff0000;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-top : 30px;
margin-right : 10px;
}

a.cssmenu:visited {
width : 100px;
color : black;
background-color : #ff0000;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 10px;
}

a.cssmenu:hover {
width : 100px;
color : #ff0000;
background-color : #0000ff;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 10px;
}

//-->
</style>
</head>

<div id="navi">
Home
About me
Photos
Videos
Contact
</div>

<hr>

</body>
</html>

minimammut

Damit die feste Breite funktioniert muss man display:block definieren. Damit sie dann trotzdem nebeneinander sind habe ich sie alle nach links gefloatet. Damit es mittig ist, habe ich dann die Breite des navi divs auf genau 600 pixel gesetzt, sodass er genau passt.

HTML

<html>


<head>
<style>


body {
scrollbar-face-color: 000000;
scrollbar-shadow-color: ff0000;
scrollbar-highlight-color:ff0000;
scrollbar-3dlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-track-color:000000;
scrollbar-arrow-color:ff0000; }
</style>


<style type="text/css">
<!--


#navi {
margin:auto;
width:600px;
}


body {text-align:center
}


body {
font-family:arial,sans-serif;
font-size:10pt;
}


body {
background-color: #000000;
}
a:link, a:visited, a:active, a:focus {
color:#ff0000;
text-decoration: none;
}


a.cssmenu:link {
width : 100px;
color : black;
background-color : #ff0000;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-top : 0px;
margin-right : 10px;
}


a.cssmenu:visited {
width : 100px;
color : black;
background-color : #ff0000;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 10px;
}




a.cssmenu:hover {
width : 100px;
color : #ff0000;
background-color : #0000ff;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 10px;
}
#cssmenu {
	width:200px;
}
//-->
</style>
</head>


<div id="navi">
[url='home.html']Home[/url]
[url='aboutme.html']About me[/url]
[url='photos.html']Photos[/url]
[url='videos.html']Videos[/url]
[url='contact.html']Contact[/url]
</div>


<hr>






[img]bs air.JPG[/img]


</body>
</html>

Alles anzeigen

edit: 2. geht glaube ich geht nicht wirklich, allerdings kannst du hinter dem definieren des Hintergrundbildes die Angabe background-position machen. Die kannst du so einstellen, dass es ungefähr passt.

Code

body {
	background-image:url(dsf);
	background-position:0px 100px;
}

driver

warum backst des erste body-css net in des andere mit rein ?

n0b0dy

danke
@ driver
hab ich vergessen, mach ich aber gleich

n0b0dy

was kann ich machen das meine tabellen wieder in der mitte sind ?

sorry, hab vergessen es auf 600pt zu geben

n0b0dy

das mit dem hintergrundbild geht nicht.

minimammut

schick nochmal deinen fertigen Quelltext bis jetzt bitte

n0b0dy

<html>

<head>

<style>

body {
scrollbar-face-color: 000000;
scrollbar-shadow-color: ff0000;
scrollbar-highlight-color:ff0000;
scrollbar-3dlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-track-color:000000;
scrollbar-arrow-color:ff0000; }
</style>

#navi {
margin:auto;
width: 600px;
}

body {text-align:center
}

body {
background-image:url(mypic.jpg);
background-position:0px 100px;
}

body {
font-family:arial,sans-serif;
font-size:10pt;
}

a.cssmenu:link {
width : 100px;
color : black;
background-color : #ff0000;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-top : 30px;
margin-right : 10px;
}

a.cssmenu:visited {
width : 100px;
color : black;
background-color : #ff0000;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 10px;
}

a.cssmenu:hover {
width : 100px;
color : #ff0000;
background-color : #0000ff;
text-align : center;
text-decoration : none;
font-size : 12px;
border-top : 1px solid silver;
border-right : 1px solid black;
border-left : 1px solid silver;
border-bottom : 1px solid black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 10px;
}

//-->
</style>
</head>

<div id="navi">
Home
About me
Photos
Videos
Contact
</div>

<hr>

</body>
</html>

minimammut

Code

<body style="background-color:#000000;">

da musst du die Hintergrundfarbe natürlich rausnehmen, wenn du ein Hintergrundbild definierst!
also einfach nur:

Code

<body>

Olli

n0b0dy

ja, aber gibts keine möglichkeit oben einen schwarzen hintergrund zu machen und unter dem zeilenumbruch ein hintergrundbild zu machen ?

minimammut

doch, das ist eigentlich schon so gewesen, nur hat der schwarze hintergrund das bild überlagert, da er zuletzt definiert wurde. So gehts:

Code

body {
background-color:#000000;
background-image:url(mypic.jpg);
background-position:0px 100px;
background-repeat:no-repeat;
}

n0b0dy

danke !!!!!

Tags