Autor |
Nachricht |
Micha02
Threadersteller
Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht:
|
Verfasst Di 23.10.2007 18:58
Titel CSS Layout |
|
|
Hallo,
bin was das Layouten mit css und div containern etc. angeht nicht besonders fit. Hab halt bis jetzt immer mit Tabellen gearbeitet. Möchte nun das folgende Layout in css umsetzten, komm da allerdings nicht weiter. Was mir da Probleme bereitet sind die (Hintergrund) Grafiken bzw. wie man diese übereinander legen kann. Hab also eine Hintergrundgrafik auf der eine weitere Grafik liegen soll und auf dem Hintergrund der Navigation halt auch. Bei meiner "Programmierung" bekomm ich zwar die Navigation (Links) zentriert auf den Hintergrund allerdings wird dieser unterhalb wiederholt. Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt. Kann sich das vielleicht einer mal ansehen und Tipps geben?
MfG
Micha
So soll´s mal aussehen:
So siehts im Moment aus:
Code html:
Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<title>Prototypestudio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/proto.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<a href="#">INDEX</a>
<a href="#">PROFIL</a>
<a href="#">PORTFOLIO</a>
<a href="#">LINKS</a>
<a href="#">KONTAKT</a>
<a href="#">IMPRESSUM</a>
</div>
<div id="menu_bg"></div>
<div id="content"></div>
</div>
</body>
</html>
|
Code css Datei:
Code: |
body
{
margin: 0;
padding: 0;
font-family : "Georgia", Trebuchet MS , Times, serif;
text-align: center;
color: #9C9B9B;
background-color: #0F1112;
}
a:link
{
color: #BEBDBD;
text-decoration: none;
}
a:visited
{
color:#BEBDBD;
text-decoration: none;
}
a:hover{color:#FFFFFF;
text-decoration: none;
}
a:active
{
color:#FFFFFF;
text-decoration: none;
}
#container
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
background-color: #0F1112;
}
#header
{
height: 200px;
background-image: url(../images/bg.jpg);
}
#navigation
{
font-family : "Georgia", Trebuchet MS , Times, serif;
font-weight: bold;
font-size: 75%;
word-spacing: 2.5em;
text-align: center;
padding:13px 0px;
background-image: url(../images/menu_bg.jpg); height: 42px;
}
|
//EDIT by Sarky
Bitte Code-Tags verwenden!
Zuletzt bearbeitet von Sarky am Di 23.10.2007 21:10, insgesamt 2-mal bearbeitet
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 24.10.2007 07:31
Titel
|
|
|
bei navigation einfach mal das probieren:
also anstatt background image.....
Code: |
background-image: url(../images/menu_bg.jpg);
background-repeat: repeat-x;
height: 42px; // Halt so groß wie des einmal ist
|
mfg choise
|
|
|
|
|
Anzeige
|
|
|
Micha02
Threadersteller
Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht:
|
Verfasst Mi 24.10.2007 13:45
Titel
|
|
|
choise hat geschrieben: | bei navigation einfach mal das probieren:
also anstatt background image.....
Code: |
background-image: url(../images/menu_bg.jpg);
background-repeat: repeat-x;
height: 42px; // Halt so groß wie des einmal ist
|
mfg choise |
Vielen Dank choise,
das hat funktioniert. Kann man jetzt noch eine Hintergrundgrafik zwischen die vorhandene und die Navigation im Vordergrund setzen? Also wie im oberen Layout Entwurf (hoffentlich) zu erkennen. Oder sollte man das anders lösen?
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 24.10.2007 16:42
Titel
|
|
|
Micha02 hat geschrieben: |
Vielen Dank choise,
das hat funktioniert. Kann man jetzt noch eine Hintergrundgrafik zwischen die vorhandene und die Navigation im Vordergrund setzen? Also wie im oberen Layout Entwurf (hoffentlich) zu erkennen. Oder sollte man das anders lösen? |
du meinst also deine headergrafik (prototypestudios)?
du kannst einen div darüber setzen und mit einem z-index versehen...
|
|
|
|
|
Micha02
Threadersteller
Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht:
|
Verfasst Mi 24.10.2007 19:38
Titel
|
|
|
pixelpapst303 hat geschrieben: | Micha02 hat geschrieben: |
Vielen Dank choise,
das hat funktioniert. Kann man jetzt noch eine Hintergrundgrafik zwischen die vorhandene und die Navigation im Vordergrund setzen? Also wie im oberen Layout Entwurf (hoffentlich) zu erkennen. Oder sollte man das anders lösen? |
du meinst also deine headergrafik (prototypestudios)?
du kannst einen div darüber setzen und mit einem z-index versehen... |
Ja genau, werd das mal ausprobieren. Vielen Dank.
MfG
Micha
|
|
|
|
|
|
|
|
Ähnliche Themen |
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
css layout
CSS Layout
Layout .PSD zu CMS
|
|