Forum Mjukvara Programmering och digitalt skapande Tråd

Problem med DIV, troligen enkelt.

1
Skriv svar
Permalänk
Medlem
●

Problem med DIV, troligen enkelt.

Bifogar bild efter vad jag önskar för resultat.

Jag har testat lägga till float left på menu och content men då blir boxarna placerade längst till höger.
Nu är istället problemet att content hamnar under menu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <META http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  body
    {
      background-image:url('bg2.png');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:100% 768px; 
    }

   div#top 
  {
    width: 1000px;
    font-size: 12px;
    padding: 5px;
    background-color:white;
    margin-right: auto; margin-left: auto;
  }
  div#menu 
  {
    width: 200px;
    font-size: 12px;
    padding: 5px;
    background-color:white;
    margin-right: auto; margin-left: auto;
  }
  div#content 
  {
    width: 800px;
    font-size: 12px;
    padding: 5px;
    background-color:white;
    margin-right: auto; margin-left: auto;
  }  
    
  </style>
  </head>
  <body><center>
    <div id="top"><img src="logo.png">Lite text...
    </div>
    
    
    <div id="menu" align="center" style="position: relative;">
    Meny</div>
    
    <div id="content" style="position: relative;">
    Innehåll</div>
    </center>
  </body>
</html>
Visa signatur

Livets 3 pelare:
SEX, MAT & KAFFE.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Du kan ha en wrapper runt istället för <center>, eller rättare sagt borde. Den ska ha en satt width och margin auto. Sen har du endel dåliga kodvanor med. Tex. använder du table för fel ändamål, har inline css och HTML attribut som align.

Redigera
Citera flera Citera
Permalänk
Medlem
●
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <META http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  body
    {
      background-image:url('bg2.png');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:100% 768px; 
    }
  div#wrapper
  {
  width: 1000px;
  margin: auto;

  }

  div#top 
  {
    width: 1000px;
    font-size: 12px;
    background-color:white;

  }
  div#menu 
  {
    width: 200px;
    font-size: 12px;
    background-color:white;
    text-align: center;
   
  }
  div#content 
  {
    width: 1000px;
    font-size: 12px;
    background-color:white;
  }  
    
  </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="top"><img src="logo.png">Lite text...
      </div>
    
    
      <div id="menu" style="float: left;">
      Meny</div>
    
      <div id="content">
      Innehåll</div>
    </div>
  </body>
</html>

En wrapper skapad antar jag?
Width=1000px, Margin = auto

Table hade jag missat där, bortstädat. Flyttat align till css:en. Tänkte flytta ut allt till en lös CSS när jag fått det att se ut som jag vill.
Nu ser sidan bra ut i Firefox även om jag inte förstår varför 200px + 1000px = 1000px?
Under IE är Wrappern inget centrerat, samt menu och content ligger på varsin rad.

Visa signatur

Livets 3 pelare:
SEX, MAT & KAFFE.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Med denna markup:

<body>
    <div id="wrapper">
      
      <div id="top"></div>
      
      <div id="menu"></div>
      
      <div id="content"></div>
      
      <div id="footer"></div>
    
    </div>
    
</body>

Hade du kunnat göra något i stil med:

#wrapper {
  margin: 0 auto;
  width: 1000px;
}

#top {
  background: green;
  height: 100px;
}

#menu {
  background: blue;
  float: left;
  height: 300px;
  width: 200px;
}

#content {
  background: yellow;
  float: left;
  height: 300px;
  width: 800px;
}  

#footer {
  background: red;
  height: 100px;    
  clear: both;
}

Gav dem background och height för att du enklare ska kunna se...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack.
Verkar funka perfekt förutom att man för IE får lägga till
body {
text-align: center;
}

Visa signatur

Livets 3 pelare:
SEX, MAT & KAFFE.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Lurcazzus:

Tack.
Verkar funka perfekt förutom att man för IE får lägga till
body {
text-align: center;
}

Gå till inlägget

Det beror på att du har angett en inkomplett doctype vilket leder till att IE hamnar i quirksmode.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Använd istället: <!DOCTYPE html>

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