Trädvy Permalänk
Medlem
Registrerad
Feb 2013

CSS fel

Hej!

Menyn och Headern lirar inte jämnt med resten av hemsidan när man minimerar browser fönster på datorn alt surfar på mobilen. Det som händer är vad bilden visar:

Som ni ser så blir både menyn och header (eller vad ni vill kalla det) mindre i bredd i förhållande till innehållet som finns precis nedanför. Hur ska jag lösa detta? har försökt ganska mycket under en längre tid att få till det, men utan resultat dock.

HTML:

<body> <div id="fb-root"> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script></div> <!--mainbox--> <div class="mainbox"> <!--Header section--> <div class="header"></div> <!--headermenu--> <div class="headermenu"> <ul id="menu"> <li><a href="blabla.php">Radionytt</a></li> </li> <li><a href="hblabla">Facebook</a></li> </li> <li><a href="blogg.php">Blogg</a></li> <li> <a href="#">Love Story</a> <ul> <li><a href="blabla.php">Lblablay</a></li> <li><a href="blabla.php">blablablabla</a></li> </ul> </li> <li><a href="blabla.php">blabla</a></li> <li> <li> <a href="#">blabla</a> <ul> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> </ul> </li> <li> <a href="#">blabla</a> <ul> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> </ul> </li> <li><a href="gastbok.php">Gästbok</a></li> <li><a href="index.php">Hem</a></li> </ul><div class="fb-like" data-href="blabla" data-send="true" data-width="450" data-show-faces="true"></div> <div class="innerbox"> <!--left menu--> <div class="menu"><h3>Kategorier</h3><ul class="leftmenu"> <br> <li><a href="blabla.php">blablablabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla-Fi</a></li> <li><a href="blabla.php">blabla</a></li> <li><a href="blabla.php">blabla</a></li> </ul> </div></div> </div> </div> </body> </html>

CSS:

/* / /*body*/ body { margin:0; padding:0; background-color: #ECECEC; background-attachment:fixed; background-position:center; max-width: 100%; min-width: 1000px; height: 100%; } /*mainbox*/ .mainbox { } .foton { max-width: 320px; height: 100%; margin:0 auto; } .infoo { height: 100%; max-width: 280px; float: left; text-align: center; vertical-align: middle; line-height: 20px; font-weight: bold; color: #3F4344; text-decoration: none; } h2 { margin-top: -10px; text-align: center; vertical-align: middle; line-height: 50px; font-weight: bold; color: #3F4344; text-decoration: none; font-size: 20px; } /*header*/ .header { background-image:url('headertf.jpg'); background-repeat:repeat-x; height: 250px; width: auto; margin:0; } .fail { width: 100%; min-width: 1200px; height: 100%; position: absolute; height: 500px; z-index: 100; float: center; margin-top: 100px; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); } #fail { width: 450px; height: 100px; margin: 100px 0px 0px 350px; padding: 20px; position: relative; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=); border: 1px solid #ccc; border-radius: 3px; float:center; } /*login*/ .login { width: 100%; min-width: 1200px; height: 100%; position: absolute; height: 500px; z-index: 100; float: center; margin-top: 100px; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); } #login { width: 450px; height: 500px; margin: 100px 0px 0px 350px; padding: 20px; position: relative; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=); border: 1px solid #ccc; border-radius: 3px; float:center; } #login::before, #login::after { content: ""; position: absolute; bottom: -3px; left: 2px; right: 2px; top: 0; z-index: -1; background: #fff; border: 1px solid #ccc; } #login::after { left: 4px; right: 4px; bottom: -5px; z-index: -2; box-shadow: 0 8px 8px -5px rgba(0,0,0,.3); } #login h1 { position: relative; font: italic 1em/3.5em 'trebuchet MS',Arial, Helvetica; color: #999; text-align: center; margin: 0 0 20px; } #login h1::before, #login h1::after{ content:''; position: absolute; border: 1px solid rgba(0,0,0,.15); top: 10px; bottom: 10px; left: 0; right: 0; } #login h1::after{ top: 0; bottom: 0; left: 10px; right: 10px; } ::-webkit-input-placeholder { color: #bbb; } :-moz-placeholder { color: #bbb; } .placeholder{ color: #bbb; /* polyfill */ } .loginlink a:link { text-decoration:none; color: #FF0000; text-decoration:none; } #login input{ margin: 5px 0; padding: 15px; width: 100%; *width: 518px; /* IE7 and below */ box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; } #login input:focus{ outline: 0; border-color: #aaa; box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset; } #login button{ margin: 20px 0 0 0; padding: 15px 8px; width: 100%; cursor: pointer; border: 1px solid #2493FF; overflow: visible; display: inline-block; color: #fff; font: bold 1.4em arial, helvetica; text-shadow: 0 -1px 0 rgba(0,0,0,.4); background-color: #2493ff; background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); transition: background-color .2s ease-out; border-radius: 3px; box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset; } #login button:hover{ background-color: #7cbfff; border-color: #7cbfff; } #login button:active{ position: relative; top: 3px; text-shadow: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; } /*mainmenu*/ #menu{ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 0px; border-radius: 0px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; } #menu li{ float: right; padding: 0 0 10px 0; position: relative; } #menu a{ float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a{ color: #fafafa; } *html #menu li a:hover{ /* IE6 */ color: #fafafa; } #menu li:hover > ul{ display: block; } /* Sub-menu */ #menu ul{ list-style: none; margin: 0px; padding: 0px; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px; } #menu ul li{ float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a{ width: 110px; padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a{ /* IE6 */ height: 10px; width: 50px; } *:first-child+html #menu ul a{ /* IE7 */ height: 10px; width: 150px; } #menu ul a:hover{ background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul li:first-child a:hover:after{ border-bottom-color: #04acec; } #menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ /*innerbox*/ .innerbox { width: 1200px; height: 100%; float: center; margin-left: auto; margin-right:auto; filter: alpha(opacity=90); opacity: .9; margin: auto; padding: auto; } /*content*/ #content { padding:0px; background-color: white; float: right; height: auto; width: 970px; margin-top: 100px; margin-left: auto; margin-right: auto; margin-bottom: 150px; -moz-border-radius: 2px; border-radius: 2px; border-style:solid; border-color:white; border-width:0px; box-shadow: 5px 5px 12px #888888; } #film { padding:0px; background-color: white; float: right; height: 1000px; width: 970px; margin-top: 100px; margin-left: auto; margin-right: auto; margin-bottom: 150px; -moz-border-radius: 2px; border-radius: 2px; border-style:solid; border-color:white; border-width:0px;box-shadow: 5px 5px 12px #888888; } /*videon*/ #videon { padding:0px; background-color: white; float: right; height: auto; width: 960px; margin-top: 100px; margin-right: auto; margin-left: auto; margin-bottom: 150px; -moz-border-radius: 2px; border-radius: 2px; border-style:solid; border-color:#8DC6FF; border-width:0px;box-shadow: 5px 5px 12px #888888; } /*menu*/ .menu { list-style: none; background-color: #FFFFFF; width: 200px; height: 500px; float: left; -moz-border-radius: 2px; border-radius: 2px; margin-top: 100px; margin-left: 0px; margin-bottom: 100px; border-style:solid; border-color:white ; border-width:0px; color: #999; box-shadow: 5px 5px 12px #888888; font: bold 12px/25px Arial, Helvetica; text-decoration: none; } /*leftmenu*/ .infobox { position: relative; width: 180px; height: 50px; margin:10px 10px 10px 10px;-moz-border-radius: 2px;border-radius: 2px; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; } h3{ text-align: center; vertical-align: middle; line-height: 50px; font-weight: bold; color: #999; text-decoration: none; } .menu a:link { text-decoration:none; display: block; color: #3F4344; font-weight:bold; text-decoration:none; padding: 0 0 0 30px } a:visited { color:#3F4344; } .menu a:hover { background-color:#30ACFF; color: white; -moz-border-radius: 1px; border-radius: 1px; display:block; } a:active { color:#3F4344; } .menu ul { padding: 0; } ul.leftmenu li { list-style-type:none; margin:0; padding:0; } /*love story*/ .love { color: red; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-align:center; background-image:url('rosor.jpg'); background-repeat:no-repeat; } .lt { float:right; margin-right: 145px; font-style:oblique; } .fb-like-box { margin-top: 1px; margin-bottom: 1 px; margin-right: 5px; float:right; } /*indextopic*/ /*table*/ .table { } td { max-height: 250px; max-width: 155px; overflow: hidden; } /*bottom*/ .bottom { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); height: 55px; width: auto; color: white; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-align:center;

Tack på förhand!

Trädvy Permalänk
Medlem
Plats
garderoben
Registrerad
Feb 2004

HTML-kod tack?

Trädvy Permalänk
Medlem
Registrerad
Feb 2013
Skrivet av BuruZ:

HTML-kod tack?

Ursäkta, glömde bort den! la in den nu

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2005

innerbox har en bredd på 1200

Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD

Trädvy Permalänk
Medlem
Registrerad
Feb 2013
Skrivet av Ernesto:

innerbox har en bredd på 1200

om jag sätter innerbox på auto eller om det var 100% (kommer inte ihåg vad jag testade förut) så blir det bra, dock kommer content boxen under sidomenyn istället när sidan minimeras (content boxen ska ligga till höge rom sidomenyn) och med content boxen menar jag där all sidans information är.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2005

Jo, det är så det blir med floatade element om man har en minimum-width. Om man vill ha en icke-responsiv layout måste man köra med absolut positionering och använda left elelr margin-left (två olika tekniker), eller använda sig av table-layout.

Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD

Trädvy Permalänk
Medlem
Registrerad
Feb 2013
Skrivet av Ernesto:

Jo, det är så det blir med floatade element om man har en minimum-width. Om man vill ha en icke-responsiv layout måste man köra med absolut positionering och använda left elelr margin-left (två olika tekniker), eller använda sig av table-layout.

tips på hur eller vad jag ska ändra i min css? är ganska fräsch i det här och vet inte riktigt vad jag ska göra för att ändra, även fast att du sagt det.