Forum Mjukvara Programmering och digitalt skapande Tråd

CSS fel

1
Skriv svar
Permalänk
Medlem
●

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 redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

HTML-kod tack?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av BuruZ:

HTML-kod tack?

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

innerbox har en bredd på 1200

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Ernesto:

innerbox har en bredd på 1200

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara