Hvordan få div element i midten? [løst]

Den normale mann · 4. mars 2005

Hei, jeg lurer på hvordan man får et div element på midten av en side ved hjelp av css?

Takk for svar

Endret 4. april 2005 av 100smiles

Prodigy_ · 4. mars 2005

Kopier dette inn i CSS fila:

margin: 0 auto;

Endret 4. mars 2005 av Prodigy_

funkweb · 4. mars 2005

Vel der tror jeg folk har forskjellige svar.. det finnes en del løsninger.

Selv jeg bruker denne:

HTML:

<div class="IE-FIX">
<div id="virtually">Hei hei</div>
</div>

CSS:

.IE-FIX {
text-align: center;
}
#virtually {
width: 764px;
margin:	0 auto;
}

Men da vil du merke at teksten er i midten også, men det er jo ikke noe problem for deg siden du bare tar over kontrollen der med egen class.!!

Jesper Karsrud · 4. mars 2005

Jeg bruker denne, som fungerer utmerket:

body, html {
text-align: center;
}

#container {
margin: 0 auto;
text-align: left;
}

Da vil IE midtstille hele body, og #container blir midtstilt av mer kompatible nettlesere. Slang inn text-align: left for å venstrestille teksten igjen inne i #container som default.

Den normale mann · 4. mars 2005

Funka dessverre ikke med noen av delene.

Her er det jeg har skrevet

body {
background: #84FF09 url('bg.gif') top;
margin: 40px;
scrollbar-3dlight-color:orange; scrollbar-arrow-color:black; scrollbar-base-color:orange; scrollbar-track-color:#84FF09; scrollbar-darkshadow-color:orange; scrollbar-face-color:orange; scrollbar-shadow-color:orange; margin-bottom:40pxscrollbar-highlight-color: 
}

#side {
position: absolute;
top: 40px;
width: 750px;
height: 650px;
padding: 20px;
background-color: orange;
}

#top {
position: absolute;
top: 40px;
left: 20px;
width: 750px;
}

#innhold-side {
position: absolute;
top: 160px;
height: 470px;
left: 20px;
width: 530px;
background-color: white;
}

.innhold {
text-align: left;
margin: 10px
background-color: #FFFFFF;
padding: 10px;
height: 300px;
}

#komentar {
display: none;
}

p.innhold {
font:12px arial;
color: black;
}

h4.innhold {
font: bold 16px arial;
color: orange;
margin: 7px 10px 2px 5px;
letter-space: 4px;
word-space: 10px;
}

#hoyre {
position: absolute;
text-align: right;
top: 160px;
bottom: 0px;
right: 0px;
width: 200px;
background-color: orange;
padding: 10px;
}

a.meny:link {
font: bold 14px arial;
text-decoration: none;
color: black;
}

a.meny:visited  {
font: bold 14px arial;
text-decoration: none;
color: black;
}

a.meny:hover {
font: bold 17px arial;
text-decoration: none;
color: black;
}

a.meny:active {
font: bold 17px arial;
text-decoration: none;
color: black;
}

td.meny {
background: url('bg-meny.gif');
padding: 10px;
width: 130px;
height: 50px;
text-align: center;
}

#bunn {
text-align: right;
position: fixed;
right: 0;
bottom: 0;
}

<html>

<head>
<meta http-equiv="imagetoolbar" content="no">
<meta name="keywords" content="100smiles, homepage, programmer, linker, tjenester">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Et eller annet</title>

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="Shortcut Icon" type="image/ico" href="ikon.ico">

<script type="text/javascript" language="javascript">
var infobilde=new Image();
var infobilde=new Image();
var infobilde=new Image();
var infobilde=new Image();
infobilde.src="infobilde.gif";
infobilde.src="infobilde-iq.gif";
infobilde.src="infobilde-prog.gif";
infobilde.src="infobilde-siden.gif";

function switchInfoimg(bildeID,kilde){
   bildeID.src = kilde;
}

function openWin(URL) {
aWindow=window.open(URL, "thewindow", "toolbar=no, width=400, height=310,status=no, scrollbars=yes, resize=no, menubars=no");
}

</script>

</head>

<body>
<p>
<div id="side">
<div style="position:  absolute; top: 0; left: 0;"><img src="hjorne-t-h.gif" width="11" height="11"></div>
<div style="position:  absolute; top: 0; right: 0;"><img src="hjorne-t-v.gif" width="11" height="11"></div>
<div style="position:  absolute; bottom: 0; left: 0;"><img src="hjorne-b-h.gif" width="11" height="11"></div>
<div style="position:  absolute; bottom: 0; right: 0;"><img src="hjorne-b-v.gif" width="11" height="11"></div>

<div id="top">
 <p>
 <a href="index.htm" title="gå til home">
  <img src="logo.gif" align="left" alt="100smiles hjemmeside" style="border: 0; position: absolute; top: 0; left: 0;" width="530" height="100">
  </a><br>
 <img src="infobilde.gif" align="right" id="swapimg" style="position:  absolute; top: 0; right: 30;" width="150" height="100">
 </p>
 </div>

<div id="innhold-side">
   <div style="position:  absolute; top: 0; left: 0;">
     <img src="hjorne-inn-t-h.gif" width="11" height="11"></div>
   <div style="position:  absolute; top: 0; right: 0;">
     <img src="hjorne-inn-t-v.gif" width="11" height="11"></div>
   <div style="position:  absolute; bottom: 0; left: 0;">
     <img src="hjorne-inn-b-h.gif" width="11" height="11"></div>
   <div style="position:  absolute; bottom: 0; right: 0;">
     <img src="hjorne-inn-b-v.gif" width="11" height="10"></div>
     
   <!-- innhold -->
     <p class="innhold"><br>Hei.<br>
     Har nytt design på denne siden.
     Har du en komentar til designe, klikk 
     <a href="#" onClick="openWin('kontakt.htm')">
     her</a>.
     Meldingen din blir bare sendt til meg personlig.
     Det er ikke så mye her enda (derfor virker ingen av sidene, har ikke lagt dem til enda), men det kommer etterhvert.
     Siden ses best med IE (Internet Explorer) med en oppløsneng på 1028x780 eller høyere
     </p>
   <!-- innhold -->
   
</div>

<div id="hoyre">
  <!-- Meny -->
  <table>
    <tr><td class="meny">
     <a class="meny" href="iq.htm" title="Klikk for å ta iq-testen." onMouseover="switchInfoimg(swapimg,'infobilde-iq.gif')" onMouseout="switchInfoimg(swapimg,'infobilde.gif')">Iq-test</a></td></tr>
    <tr><td class="meny">
     <a class="meny" href="linker.htm" title="Klikk for å komme til siden linker" onMouseover="switchInfoimg(swapimg,'infobilde.gif')" onMouseout="switchInfoimg(swapimg,'infobilde.gif')">Linker</a></td></tr>
    <tr><td class="meny">
     <a class="meny" href="programmer.htm" title="Klikk for å komme til siden om programmer" onMouseover="switchInfoimg(swapimg,'infobilde-prog.gif')" onMouseout="switchInfoimg(swapimg,'infobilde.gif')">Programmer</a></td></tr>
    <tr><td class="meny">
     <a class="meny" href="meg.htm" title="Klikk for å komme til siden om meg" onMouseover="switchInfoimg(swapimg,'infobilde.gif')" onMouseout="switchInfoimg(swapimg,'infobilde.gif')">Om meg</a></td></tr>
    <tr><td class="meny">
    <a class="meny" href="siden.htm" title="Klikk for å komme til siden om denne hjemmesiden" onMouseover="switchInfoimg(swapimg,'infobilde-siden.gif')" onMouseout="switchInfoimg(swapimg,'infobilde.gif')">Om siden</a></td></tr>
  </table>
 </div>
</div>

<div id="bunn">
<a href="copyright.htm" title="Klikk for å kontakte webmaster">
Kontakt meg</a>
</div>
</p>
</body>
</html>

Arve Systad · 5. mars 2005

http://unrealized.org/artikkel/css/midtstilling_i_css/ <= Les alt du trenger der.

Prodigy_ · 5. mars 2005

http://unrealized.org/artikkel/css/midtstilling_i_css/ <= Les alt du trenger der.

Kan jo like godt lese denne også:

http://decalibration.net/artikler/sentrering/

Logg inn

Hvordan få div element i midten? [løst]

Anbefalte innlegg

Den normale mann

Lenke til kommentar

Videoannonse

Prodigy_

Lenke til kommentar

funkweb

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

Den normale mann

Lenke til kommentar

Arve Systad

Lenke til kommentar

Prodigy_

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer