Just nu i M3-nätverket
Jump to content

Positionering


Jompan

Recommended Posts

Varför lägger sig denna css riktigt i Firefox, dvs med vänsterställda marginaler, men centrerad (centrerad text) i Internet Explorer?

 

html {
font-size: 12px;
line-height: 150%; 
font-family: verdana;
   background-image: url('../img/bakgrund.gif'); 
background-repeat: repeat;
margin:0;
padding:0;
} 



body { 
   margin: 15px auto;
   width: 900px;
padding: 15px;
   background: #DEEDFD;
   border: 2px solid #660066;
}


#sidhuvud	{
height: 85px;
padding: 10px 0 0 0;
background-color: #C5E0FB;
margin-bottom: 15px;
} 


#container {
margin-top: 25px;
background: #E5F3FF; 
}

#col1 {
float: left;
width: 150px; 
padding-right: 0; 
padding-left: 0;
}

#col2 {
width: 510px; 
float: left; 
margin-left: 1px;
padding-right: 50px; 
padding-left: 25px;
border-left: 0 solid #000000; 
min-height: 450px;	
}


#col3 {
width: 140px; 
float: left; 
margin-left: 0;
padding-right: 0; 
padding-left: 0;
border-left: 0px solid #000000; 
}

#kolumnbox1 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
float: left;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #CCE6B3;
margin: 0;
margin-bottom: 20px;
padding: 10px;
}


#kolumnbox2 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
right:175px;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #C5E0FB;
margin: 0;
margin-bottom: 20px;
padding: 10px;
clear: left;
}


#kolumnbox3 {
right:175px;
width: 125px;
margin: 0;
padding: 10px;
clear: left;
}

 

Alltid dessa förvånande resultat!!

 

// Jompan

Link to comment
Share on other sites

det har inget med saker att göra men du har en del egenskaper satt till 0, vilket är onödigt då detta är standard.

Ta bort dessa så blir din kod lättare och mer överskådlig.

Link to comment
Share on other sites

Nu har jag rensat bort alla 0-koder. Allt funkar i Firefox och Chrome, men i Internet Explorer ligger fortfarande sidornas texter centrerade, och därtill har allt lagt sig i vänstermarginal, utom sidhuvudet som ligger centrerat över hela övre skärmdelen.

 


html {
font-size: 12px;
line-height: 150%; 
font-family: verdana;
   background-image: url('../img/bakgrund.gif'); 
background-repeat: repeat;
} 

body { 
   margin: 15px auto;
   width: 900px;
padding: 15px;
   background: #DEEDFD;
   border: 2px solid #660066;
}

#sidhuvud	{
height: 85px;
padding: 10px 0 0 0;
background-color: #C5E0FB;
margin-bottom: 15px;
} 

#container {
margin-top: 25px;
background: #E5F3FF; 
}

#col1 {
float: left;
width: 150px; 
}

#col2 {
width: 510px; 
float: left; 
margin-left: 1px;
padding-right: 50px; 
padding-left: 25px;
border-left: 0 solid #000000; 
min-height: 450px;	
}

#col3 {
width: 140px; 
float: left; 
border-left: 0px solid #000000; 
}

#kolumnbox1 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
float: left;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #CCE6B3;
margin-bottom: 20px;
padding: 10px;
}

#kolumnbox2 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
right:175px;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #C5E0FB;
margin-bottom: 20px;
padding: 10px;
clear: left;
}

#kolumnbox3 {
right:175px;
width: 125px;
padding: 10px;
clear: left;
}

h1	{
font-size: 14px;
font-weight: bold;
}

h2	{
font-size: 13px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 0.5px;
}

h3	{
font-size: 12px;
font-weight: bold;
}	

hr 	{
color: #ffcc99;
}	

p	{
font-family: verdana;
font-size: 12px;
color: #000000;
}

a 	{
text-decoration:none;
outline:0;
} 

a:link	{
color: #0033ff;
}

a:visited	{
color: #0033ff;
}

a:hover	{
color: #006600;
}	

a:active {
color: #0033ff;
}

#sidfot {
height: 20px;
padding: 1px 0 20px 0;
background:#CCE6B3;
margin-right: 1px;
margin-bottom: 5px;
margin-left: 1px;
}

#sidfot p {
font-weight: bold;
text-align: center;
font-size: 10px;
margin-left: 1px;
}

.clear {
clear: both;
}

.left {float: left;}
.right {float: right;}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/* clearer fix */
div#content {overflow:auto;} 

 

Finns det någon lösning?

 

// Jompan

Link to comment
Share on other sites

du har text-align: center; i #sidfot p.

Kan du ha gjort fel i din html som gör att allt annat också blir centrerat?

 

Hur ser din html ut?

Link to comment
Share on other sites

Jag använder php med include, så det är många filer:

 

Huvud

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
   <meta charset="utf-8">
   <title><?php echo $title; ?></title>
   <link rel="stylesheet" href="stil/standard.css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>

<div id="sidhuvud">

<center>
<img src="img/logga.gif" width="450">

</div>

Mitten centrum

<?php include("incl/config.php"); ?>
<?php $title = "Mitten"; ?>
<?php include("incl/huvud.php"); ?>

<div id="container">
</div>

<div id="col1">
<?php include("incl/meny.php"); ?>
</div>

<div id="col2">

<h1>XXX</h1>

<h2>Yyy ...</h2>

Diverse CSS tar kontroll över dina sidor
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som 

Diverse CSS tar kontroll över dina sidor
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som 
sidor.</p>

</div>
</div>
</div>

<?php include("incl/sida.php"); ?>
<?php include("incl/fot.php"); ?>

 

Fot


<div id="sidfot">

<p>Webbplatsen uppdaterad ...
</p>

</div>

</body>
</html> 

 

Meny vänster

<style>

#meny ul {
padding:0;
margin:0;
margin-left:10px; 
margin-right:20px;
list-style:outside none;
font-weight: bold;
}

#meny li{
margin:0; 
padding:0; 
} 

#meny li {
border-bottom: 1px solid #660066;
}

#meny li:first-child {
border-top: 1px solid #660066;
border-bottom: 1px solid #660066;
}

#meny li a{
display:block; 
padding:8px;
} 

</style>

<div id="meny">

<ul> 
   <li><a href="index.php">Hem</a></li> 
   <li><a href="mitten.php">Guideprogram</a> 
   <li><a href="kontakt">Aktuella månadsmöten</a> 
   </ul>

</div>

 

Sida höger


<div id="col3">
<div id="kolumnbox1">
<p>
aaa Diverse CSS tar kontroll över dina sidor
Diverse CSS tar kontroll över dina sidor
</p>
</div>

<div id="kolumnbox2">
<p>
bbbbbbb Diverse CSS tar kontroll över dina sidor
Diverse CSS tar kontroll över dina sidor
</p>
</div>

</div>

<div class="clear">
</div>

 

Usch så rörigt!!

 

// Jompan

Link to comment
Share on other sites

i sidhuvud har du


<center>
<img src="img/logga.gif" width="450">

 

ta bort <center> eller lägg till en sluttagg efter bilden(loggan)

Link to comment
Share on other sites

Hjälper tyvärr inte.

Både 'huvud' och 'fot' täcker fortfarande hela skärmen, medan mellansektionen ligger vänsterställd.

 

// Jompan

Link to comment
Share on other sites

Fel jag hittade i källkoden

 

  1. Ogiltliga tecken först i dokumentet.
  2. style-del ska ligga i head-avsnittet
  3. Ogiltligt tecken innan <style>-tagg, innan #col3 och innan #sidfot
  4. Ingen bodytag efter </html>
  5. Använd inte <center>-taggen. Använd istället css-propertyn text-align för att centrera
  6. I col2 stänger du div-taggen för många gånger.
  7. Ska inte #container omsluta allt innehåll? -Det gör det inte nu

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...