Verktyg Visningsval
2013-10-28, 14:08   #1

Jansson200

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!

Senast redigerad av Jansson200 2013-10-28 klockan 14:36.
Jansson200 är inte uppkopplad
2013-10-28, 14:13   #2

BuruZ

Medlem

Plats: garderoben

Registrerad: feb 2004

HTML-kod tack?
BuruZ är inte uppkopplad
2013-10-28, 14:30   #3

Jansson200

Medlem

Registrerad: feb 2013

Citat:
Ursprungligen inskrivet av BuruZ Visa inlägg
HTML-kod tack?
Ursäkta, glömde bort den! la in den nu =)
Jansson200 är inte uppkopplad
2013-10-28, 15:39   #4

Ernesto

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
Ernesto är uppkopplad nu
2013-10-28, 15:57   #5

Jansson200

Medlem

Registrerad: feb 2013

Citat:
Ursprungligen inskrivet av Ernesto Visa inlägg
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.
Jansson200 är inte uppkopplad
2013-10-28, 18:57   #6

Ernesto

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
Ernesto är uppkopplad nu
2013-10-28, 20:36   #7

Jansson200

Medlem

Registrerad: feb 2013

Citat:
Ursprungligen inskrivet av Ernesto Visa inlägg
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.
Jansson200 är inte uppkopplad
Senaste nyheterna

Redaktionens senaste nyhetsrubriker

Sök jobb