När man minimerar så följer allting med.. (webdesign)

Permalänk

När man minimerar så följer allting med.. (webdesign)

Hejsan, jag har precis kodat en hemsida fast jag har ett litet problem.. Problemet är att min meny och content inte är statiska(alltså på samma ställe, om jag uppfattat statisk rätt). När jag förhandsgranskar min hemsida och minimerar rutan så följer menyn och contenten med fast jag vill att den ska vara kvar på samma ställe. Detta förstör väldigt mycket för de som använder sin smartphone tex för att gå in på sidan när allting ligger ihop knycklat i mitten.. Sorry för kass formulering! // tack på förhand!

Permalänk
Medlem

Posta relevant kod och gärna en screenshot.

Visa signatur

Osocial, instängd och förbannad.

Permalänk

@charset "utf-8";
/* CSS Document */

a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color: #76DAFF;
}

/* Text-settings */
h1 {
text-decoration: none;
font-family: "Lucida Console", Monaco, monospace;
font-size: 18px;
color: #FFF;
}
h2 {
text-decoration: none;
font-family: "Lucida Console", Monaco, monospace;
font-size: 16px;
color: #FFF;
}
h3 {
text-decoration: none;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
color: #FFF;
}
h4 {
font-size: 16px;
text-decoration: underline;
font-family: "Lucida Console", Monaco, monospace;
font-weight: bold;
color: #FFF;
}
h5 { text-decoration: none; }
h6 { text-decoration: none; }
a { text-decoration: none; }

/* Text-settings */

body{
margin:0px;
padding:0px;
background-attachment: fixed;
background-image: url(images/background.jpg);

}

#header_wrap{
margin:0px;
background-color: #0D0E10;
height: auto;
width: 1600px;

}

#header{
width:980px;
margin-right: auto;
margin-left: auto;
height: 200px;

}

#site_logo{
height:200px;
background-image: url(images/site_logo.png);
background-repeat: no-repeat;
width: 650px;
float: none;
margin-right: auto;
margin-left: auto;

}

#menu_wrap{
width:auto;
height:86px;
background-repeat: repeat-x;
background-color: #3CF;
background-image: url(images/button.jpg);

}

#menu{
width:900px;
height:86px;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;

}
#sidebar {
background-color: #121212;
width: 180px;
float: left;
height: auto;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
color: #FFF;
border: 1px solid #000;
margin-left: 2px;
}
#site {
height: auto;
width: 910px;
margin-right: auto;
margin-left: auto;
}

#menu ul{
margin:0 0 0 28px;
padding:0px;
list-style:none;

}

#menu li{
margin:0px;
padding:0px;
display:inline;

}

#menu a{
float:left;
display:block;
height:24px;
width:150px;
text-align:center;
font-size:15px;
text-decoration:none;
color:#FFF;

font-weight:bold:
outline:none;
background-position: bottom;
font-family: "Lucida Console", Monaco, monospace;
padding-top: 62px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#menu a:hover {
color:#B9DCFF;
background-image: url(images/button_ahover.jpg);
background-repeat: no-repeat;
background-position: bottom;

}

#content{
color:#FFF;
background-position: bottom;
width: 638px;
height: auto;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 30px;
float: left;
background-color: #151515;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
background-repeat: repeat;
border: 1px solid #030303;
}
#titel {
}
#text {
padding-top: 15px;
padding-bottom: 35px;
}
#text_sidebar {
margin-top: 5px;
}
#titel_sidebar {
margin-top: 5px;
}
#loginbar {
float: right;
background-color: #151515;
height: 120px;
background-repeat: no-repeat;
border: 4px double #030303;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 30px;
}
#loginbar_pass {
color: #FFF;
float: left;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 5px;
position: static;
}

#loginbar_namn {
color: #FFF;
float: left;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
position: static;

}
#log_text {
color: #FFF;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
margin-top: 10px;
}
#plain_text {
color: #FFF;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
padding-top: 20px;
}

Dold text

Tror CSS koden räcker.

Innan minimering:

Efter minimering:

OBS! Jag har tagit bort lite saker med paint, så ignorera dom vita rutorna!

Permalänk
Inaktiv

Med float och position: static / absolute brukar det bli så. Hur vill du att det ska fungera? Ska man behöva scrolla rundor på sin telefon för att kolla på hemsidan? Det kommer bli riktigt jobbigt i längden.

Permalänk

Nej, hemsidan fungerar jätte bra förutom att allting åker in i mitten när man minimerar rutan. Dessutom när man använder sin smartphone med mkt mindre upplösning så trycks allt i hop i mitten. Jag vill ha det att det är på sin plats hela tiden.