• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIVs rutchen bei Verkleinerung nach Links

P

programmer96

Neues Mitglied
Hallo zusammen,

habe ein kleines Problem bei der Programmierung meines aktuellen Projektes.
Wird die Seite verkleinert, rutschen Header und Footer nach Links, Content bleibt aber bestimmer Stelle einfach stehen.

Hat jemand eine Idee, wie man das am geschiktesten Lösen kann, sodass alle 3 Bereiche gleich "verrutschen", wenn das Broswerfenster verkleinert wird?

Link zum Problem: Link

HTML: 
<!DOCTYPE html>
<html>
<head>
    <!-- Start PRIVATIES !!!!!!!!!!!!!! -->
    <title>CONCIERGE SERVICE SYLT - Auf Ihre Wünsche spezialisiert</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../css/style_pr.css" />
</head>
<body>

    <div id="header">
    
    <a href="../index.html">
    <img src="../img/logo.png" /></a>
    <div id="navi"><a href="uberuns.html">ÜBER UNS</a><a href="leistungen.html">LEISTUNGEN</a><a href="partner.html">PARTNER</a><a href="kontakt.html">KONTAKT</a></div></div>
    <div id="container">
    <div id="sub-navi">
            <!-- PLATZHALTER -->
    </div>
    <div id="content">
    <h1><span style="color: #a68312;">*</span>HERZLICH WILLKOMMEN – </h1><h1 class="padding">SCHÖN, DASS SIE DA SIND</h1>
    <p>
    Erfahren Sie eine völlig neue Art der Dienstleistung.<br />
    Wir bringen Ihnen die Vorzüge eines 5-Sterne-Hotelaufenthaltes in Ihre Ferienwohnung ohne Verzicht auf Privatsphäre.<br /> 
    Immobilienbesitzer unterstützen wir dabei, ein zweites Zuhause entstehen zu lassen, Urlaubern bieten wir Geborgenheit und Erholung. <br />
    Gemeinsam werden wir Ihre Lebensqualität verbessern und Ihnen Momente der Entschleunigung ermöglichen. <br />
    Ganz nach unserem Kredo: <br />INDIVIDUELL – ZUVERLÄSSIG – DISKRET<br />
    </p>
    <div style="margin-top: 35px" align="center"><img src="../img/klammer.png" /></div><br /><br /><br />
    </div>
    <div id="sidebar">
        <!-- PLATZHALTER -->
    </div>
    </div>
    <div id="footer">
    
    <div class="in">
    <a style="color: #a68312;" href="mitglieder-bereich.html">MITGLIEDERBEREICH</a> | <a href="kontakt.html">KONTAKT</a> | <a href="impressum.html">IMPRESSUM</a> <span id="copyright">copyright cs-sylt2013</span>
    </div>
</div>
    
    
    

 
</body>
</html>

HTML: 
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200|Buenard);
@import url(http://fonts.googleapis.com/css?family=Buenard);
@import url(http://fonts.googleapis.com/css?family=Rufina|Gentium+Basic|Lustria|Lora|Neuton);
body{
background: url(../img/bg.jpg);
font-family: 'Source Sans Pro', sans-serif;
color: #FFF;
}

img{
margin: 0;
padding: 0;
border: 0;
}

*{
margin: 0; padding: 0;
}

/* Überschriften */

h1{
font-size: 42px;
color: #42637a;
font-weight: 100 !important;
}

.padding{
padding-left: 16px;
margin-bottom: 20px;
}

#wrapper
{
width: 100%;
}

#wrap2{
width: 1260px;
}

#container2
{
width: 1260px;
}


h2{

font-family:'Neuton', serif;
}

.toggleAccordeon{
font-weight: 400;
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
color: #a68312;
text-decoration: none;
}

/* Links */

a {
color: #a68312;
text-decoration: none;
}

/* Container Rahmen Global */

#container{
width: 1260px;
height: auto;
margin-left: auto;
margin-right: auto;
}

/* Kopfbereich mit Logo */


#header{
padding-top: 50px;
height: auto;
width: 100%;
background: #081021 url(../img/header.jpg) repeat;
text-align: center;
margin-bottom: 35px;
border-bottom: 1px solid #0c1a29;
}

/* Hauptnavigation */

#navi{
text-align: center;
margin-top: 25px;
margin-left: 3px;
margin-bottom: 5px;
}

#navi a{
font-weight: 100 !important;
color: #FFF;
text-decoration: none;
padding: 10px;
font-size: 24px;
}

#navi a:hover{
color: #42637a;
}

#navi .active{
color: #42637a;
}

/* Wrapper um Subnavigation, Content und Sidebar */


/* Subnavigation */

#sub-navi{
text-align: right;
float: left;
width: 340px;
margin-top: 130px;
line-height: 1.5;
margin-right: 40px;
}

#sub-navi a{
text-transform: uppercase;
font-size: 18px;
text-decoration: none;
color: #FFF;

font-weight: 400 !important;
}

#sub-navi a:hover{
color: #42637a;
}

#sub-navi .active{
color: #42637a;
}

#sub-navi-k{
text-align: right;
float: left;
width: 345px;
margin-top: 75px;
margin-right: 50px;
}

#sub-navi-k a{
text-transform: uppercase;
font-size: 18px;
text-decoration: none;
color: #FFF;
font-weight: 400 !important;
}

#sub-navi-k a:hover{
color: #42637a;
}

#sub-navi-k .active{
color: #42637a;
}


/* Content */

#content{

float: left;
width: 520px;
}

#content p{
font-weight: 100 !important;
font-size: 18px;
font-family: 'Neuton', serif;
line-height: 1.5;
padding-left: 16px;
}

/*
#content a{
color: #FFF;
}

#content a:hover{
color: #a68312;
}
*/

/* Rechte Sidebar */

#sidebar{
margin-left: 70px;
margin-top: 128px;
float: left;
width: 140px;
}

#sidebar a{
font-size: 14px;
font-weight: 400;
color: #a68312;
text-decoration: none;
}

#sidebar span{
font-size: 18px;
font-family:'Neuton', serif;
}

#sidebar_k{
margin-left: 70px;
margin-top: 75px;
float: left;
width: 140px;
}

#sidebar_k a{
font-size: 14px;
font-weight: 400;
color: #a68312;
text-decoration: none;
}

#sidebar_k span{
font-size: 18px;
font-family:'Neuton', serif;
}

/* Footer */

#footer{
border-top: 1px solid #0c1a29;
background: url(../img/header.jpg) repeat;
width: 100%;
position: fixed;
bottom: 0;
}

#footer a{
color: #FFF;
text-decoration: none;
padding: 4px;
font-size: 12px;
}

#footer a:hover{
color: #42637a;
}

.in{
padding: 10px;
width: 480px;
margin-left: auto;
margin-right: auto;
}

.y{
color: #a68312;
}

#copyright{
margin-left: 105px;
font-size: 12px;
}

Beste Grüße!
 
Hallo,

also wenn das von @threadi gemacht hast schau mal nach #sub-navi, das liegt fest vom hinhalt und verbraucht den platz.

zweitens ist #container 1260px breit, is ganz schön optimistisch undweit von jedem standard entfernt, also wagerechter scroll wird normal sein für deine besucher.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben