Hallo
In den vorhandenen Beiträgen habe ich leider keine Lösung zu meinem Problem finden könne.
Ich habe den Container im Body zentriert, das geht auch bei verschiedenen Bildschirmgrößen.
Fülle ich den Container mit Div-Bereichen, erscheint der Scrollbalken und ich muß den Container in die Mitte rücken,
obwohl ich den Div "Seitenstreifen" mit Width auto versehen habe und dieser leer ist.
Kann mir jemand Helfen?
Beste Grüße
<body>
<div id="container">
<h1>Juwelier und Goldschmiedeatelier in Leipzig</h1>
<div id="firmierung">Firmierug</div>
<div id="Navigation">Raum für den Inhalt von id "Navigation"</div>
<div id="seitenbild">Seitenbild</div>
<h2> GOLDSCHMIEDEATELIER GARCIA</h2>
<div id="Seitenstreifen"></div>
<div id="seitentext">Seitentext</div>
<div id="fussnavigation">Fussnavigation</div>
</div>
</body>
css basisaufteilung
@charset "utf-8";
#firmierung {
height: 215px;
width: 650px;
position: absolute;
left: 500px;
top: 118px;
color: hsla(240,100%,50%,1);
background-color: hsla(44,100%,97%,1);
}
#Seitenstreifen {
height: 352px;
position: relative;
top: 400px;
text-align: center;
width: auto;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
}
#seitentext {
background-color: hsla(44,100%,97%,1);
height: 1500px;
width: 960px;
position: absolute;
left: 500px;
top: 800px;
text-align: left;
font-size: 16px;
}
#Navigation {
background-color: hsla(340,100%,50%,1);
height: 250px;
width: 240px;
position: absolute;
left: 1220px;
top: 80px;
}
#fussnavigation {
height: 50px;
width: 760px;
position: absolute;
left: 500px;
top: 2300px;
margin-right: auto;
margin-left: auto;
padding-right: 100px;
padding-left: 100px;
background-color: hsla(0,0%,100%,1);
}
#seitenbild {
background-color: hsla(240,100%,90%,1);
height: auto;
width: 460px;
position: absolute;
top: 500px;
left: 1000px;
z-index: 1;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
left: 510px;
top: 692px;
z-index: 1;
color: #333333;
font-weight: lighter;
font-variant: small-caps;
}
h1 {
font-size: 1.2em;
text-indent: -2450px;
}
CSS Zentrierung
@charset "utf-8";
body {
background-color: hsla(60,100%,67%,1);
margin: 0px;
height: 100%;
width: 100%;
padding: 0px;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: hsla(80,100%,12%,1);
border-right-color: hsla(80,100%,12%,1);
border-bottom-color: hsla(80,100%,12%,1);
border-left-color: hsla(80,100%,12%,1);
}
#container {
background-color: hsla(140,100%,75%,1);
height: 2500px;
width: 2000px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position: relative;
padding-left: 0px;
padding-right: 0%;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: hsla(270,100%,17%,1);
text-align: center;
}
container zentriert sich im body und passt sich verschiedenen Bildschirmgrössen an