Mixed-John
Neues Mitglied
Hallo Leute,
ich habe ein Problem und zwar habe ich einen Hintergrund mit folgenden Maßen erstellt:
Breite: 1280px
Höhe:1024px
http://www.fotos-hochladen.net/view/layoutwebsitevomufprh9b.jpg
Ich habe bei dem Hintergrundbild Seitenränder von jeweils 240px gewählt.
Jetzt möchte ich meinen Content also Bilder und Text und co. nur auf den verbleibenden 800px darstellen.
Also auch wenn das Browserfenster kleiner gemacht wird soll der Content auf der Weißen-Fläche weiterhin dargestellt werden.
Ich habe das Problem das ich Html-code versucht habe alle Divs über center zu zentrieren, aber das war glaube ich nicht die eleganteste lösung weil wenn ich jetzt noch eine Einrückung des Textes über Padding vornehmen will geht das nur über padding left.
Hier mein Html-code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ski</title>
<link href="Css/layoutS.css" rel="stylesheet" media="screen"/>
</head>
<body>
<center>
<div id="Content">
<div id="Header">
<img src="img/Skih.jpg">
</div>
<div id="Navigation">
<ul>
<li><a href="#">Winterprogramm</a></li>
<li><a href="#">Sterzing</a></li>
<li><a href="#">Skisafari</a></li>
<li><a href="#">Trafoi-Skisafari</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Impressum </a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#"> ⟵ </a></li>
</ul>
</div>
<div id="Text">
<p> <i>Erleben und genießen sie mit uns: Skitraningswochen, Skireisen und Kurse mit erfahrenen Skilehrern, Skigebiete von uns sorgfältig aus-gewählt und Hotels in zentraler Lage, komfortabel und sportlich, für unsere Gäste ausgewählt.</i></p>
</div>
</div>
</center>
</body>
</html>
und hier mein Css-code:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-position: center top;
background-image: url(../img/Layout-Website.jpg);
background-repeat:repeat-y;
background-color:#d9e3e7;
font-family: open-sans, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#Header{
width: 800px;
height:220px;
}
#Navigation{
background-color: #003368;
width: 800px;
height: 53px;
font-size: 16px;
margin-top: 0;
padding-top: 0;
}
#Navigation ul{
margin: 0;
padding: 15px;
}
#Navigation li{
list-style:none;
display:inline-block;
margin: 0,2em; padding: 0;
}
#Navigation a{
text-decoration: none;
padding-left: 10px;
padding-rigt: 10px;
padding-bottom: 7px;
padding-top: 7px;
color: #FFF;
border-right: #000 medium;
font-weight: bold;
}
#Navigation a:hover, #Navigation a:focus, #Navigation a:active{
background-color:#FFF;
color:#003368;
padding-right: 5px;
padding-left: 5px;
padding-top: 25px;
padding-bottom: 20px;
border-top:#000 medium;
font-size:16px;
}
#Text{
width:800px;
background-color: ;
padding-top: 150px;
font-weight: normal;
padding-right: 250px;
}
#Content{
width:800px;
background-color: none;
}
Ich probiere schon seit einigen Stunden rum und es klappt einfach nicht.
Wäre super wenn einer von euch meinen Fehler findet.
Schon mal Vielen Dank im Vorraus :)
ich habe ein Problem und zwar habe ich einen Hintergrund mit folgenden Maßen erstellt:
Breite: 1280px
Höhe:1024px
http://www.fotos-hochladen.net/view/layoutwebsitevomufprh9b.jpg
Ich habe bei dem Hintergrundbild Seitenränder von jeweils 240px gewählt.
Jetzt möchte ich meinen Content also Bilder und Text und co. nur auf den verbleibenden 800px darstellen.
Also auch wenn das Browserfenster kleiner gemacht wird soll der Content auf der Weißen-Fläche weiterhin dargestellt werden.
Ich habe das Problem das ich Html-code versucht habe alle Divs über center zu zentrieren, aber das war glaube ich nicht die eleganteste lösung weil wenn ich jetzt noch eine Einrückung des Textes über Padding vornehmen will geht das nur über padding left.
Hier mein Html-code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ski</title>
<link href="Css/layoutS.css" rel="stylesheet" media="screen"/>
</head>
<body>
<center>
<div id="Content">
<div id="Header">
<img src="img/Skih.jpg">
</div>
<div id="Navigation">
<ul>
<li><a href="#">Winterprogramm</a></li>
<li><a href="#">Sterzing</a></li>
<li><a href="#">Skisafari</a></li>
<li><a href="#">Trafoi-Skisafari</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Impressum </a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#"> ⟵ </a></li>
</ul>
</div>
<div id="Text">
<p> <i>Erleben und genießen sie mit uns: Skitraningswochen, Skireisen und Kurse mit erfahrenen Skilehrern, Skigebiete von uns sorgfältig aus-gewählt und Hotels in zentraler Lage, komfortabel und sportlich, für unsere Gäste ausgewählt.</i></p>
</div>
</div>
</center>
</body>
</html>
und hier mein Css-code:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-position: center top;
background-image: url(../img/Layout-Website.jpg);
background-repeat:repeat-y;
background-color:#d9e3e7;
font-family: open-sans, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#Header{
width: 800px;
height:220px;
}
#Navigation{
background-color: #003368;
width: 800px;
height: 53px;
font-size: 16px;
margin-top: 0;
padding-top: 0;
}
#Navigation ul{
margin: 0;
padding: 15px;
}
#Navigation li{
list-style:none;
display:inline-block;
margin: 0,2em; padding: 0;
}
#Navigation a{
text-decoration: none;
padding-left: 10px;
padding-rigt: 10px;
padding-bottom: 7px;
padding-top: 7px;
color: #FFF;
border-right: #000 medium;
font-weight: bold;
}
#Navigation a:hover, #Navigation a:focus, #Navigation a:active{
background-color:#FFF;
color:#003368;
padding-right: 5px;
padding-left: 5px;
padding-top: 25px;
padding-bottom: 20px;
border-top:#000 medium;
font-size:16px;
}
#Text{
width:800px;
background-color: ;
padding-top: 150px;
font-weight: normal;
padding-right: 250px;
}
#Content{
width:800px;
background-color: none;
}
Ich probiere schon seit einigen Stunden rum und es klappt einfach nicht.
Wäre super wenn einer von euch meinen Fehler findet.
Schon mal Vielen Dank im Vorraus :)
