html - Fast størrelse på hjemmeside - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #15263 @ 31.08.09 17:35

Hej UDVIKLERE <3

Jeg vil gerne spørge hvordan jeg laver en fast størrelse på min nye hjemmeside, så den ikke udvider sig alt efter computerens opløsning. Havde forestillet mig 800*600.

Kode

body {padding:50px 100px; margin:0; font-family:Tahoma, Geneva, sans-serif; background-color:black;}

#container {background-color:white; padding:10px;}

#header {height:150px; background-image:url(images/header_bg.png);}
#logo {font-size:30px; background:url(images/header.png) no-repeat; height:100px; padding:50px 0 0 30px;}
#logo a {color:#FFFFFF; text-decoration:none;}
#slogan {float:right; font-size:18px; color:#FFFFFF; padding:60px 30px 0 0;}

#menu {height:40px; background-image:url(images/menu_bg.png); margin-top:5px;}
#menu ul {margin:0; padding:0;}
#menu li {list-style:none; float:left; background:url(images/menu_border.png) right no-repeat;}
#menu a {float:left; height:20px; padding:10px 30px; color:#FFFFFF; font-size:15px; font-weight:bold; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
#menu a:hover {background:url(images/menu_border.png);}

#main {float:left; width:100%; margin:5px 0; background:url(images/main_bg.png) right repeat-y; color:#111111; font-size:11px;}
#main a {color:#333333;}
#main a:hover {color:#000000;}
#main br {line-height:8px;}
#sidebar {width:160px; float:right; padding:0 30px 30px 30px; margin-top:10px;}
#sidebar h3 {font-size:17px; font-weight:normal; margin:20px 0 5px 0;}
#sidebar ul {margin:0; padding:0; border-top:1px solid #ECECEC;}
#sidebar li {list-style:none; border-bottom:1px solid #ECECEC;}
#sidebar li a {color:#111111; text-decoration:none; padding:3px; display:block;}
#sidebar li a:hover {background-color:#ECECEC;}
#text {line-height:14px; margin-right:225px; padding:10px 30px 30px 30px;}
#text h1 {font-size:22px; font-weight:normal; margin:20px 0 10px 0;}
#text h2 {font-size:19px; font-weight:normal; margin:20px 0 10px 0;}
#text ol, #text ul {padding:0; margin:8px 0;}
#text li {margin-left:40px;}

#footer {height:40px; color:#FFFFFF; font-size:11px; background-image:url(images/footer_bg.png); clear:both;}
#footer a {color:#FFFFFF;}
#footer a:hover {color:#DFDFDF;}
#footer_left {float:left; padding:13px 0 0 30px;}
#footer_right {float:right; padding:13px 30px 0 0;}

Sådan ser den ud nu. Hvordan gør jeg den fast i størrelsen?

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #3143 @ 31.08.09 17:59

1.965

Du skal bare tage et element, som indeholder hele siden, og sætte en width:800px på den. Hvilket element det er kan ikke ses ved bare at se på din CSS.

Bruger #15158 @ 20.09.09 20:57

Hej Yusuf.

Du skriver -

Du behøver ikke alt det han har brugt, du kan nøjes med:

div#container {
width: 800px;
height: 600px;
margin: 0px auto;
}

- og det kan du delvis have ret i.

Jeg har dog gjort det til en vane altid at positionere mine elementer. Og når jeg sætter margin til 10px, er det udelukkende fordi, en side på kun 800x600 ser kønnere ud med lidt luft omkring.
Men det er naturligvis en smagssag.

Til gengæld ønsker Kristina en fast størrelse på hjemmesiden. Og hvis hun skal holde tekster og andre elementer indenfor begrænsningen på 800x600, må hun definere en 'overflow' enten med hidden, scroll eller auto.

Og når baggrunden skal være hvid, må sidste linie: 'background:#ffffff;' nødvendigvis også være der.

Men du har ganske ret i at 'padding:0;' ikke behøver at være der.

MrLES

Bruger #15158 @ 01.09.09 02:00

Hej Kristina.

Som Jesper skriver, er det svært at se blot ud fra din CSS, men...

prøv følgende:

Kode


body
{
margin:0px;
font-family:tahoma, geneva, sans-serif;
background:#000000;	
}

#container
{
position:relative;
margin:10px auto;
padding:0;
width:800px;
height:600px;
overflow: hidden;
background:#ffffff;
}

Jeg går her ud fra, at '#container' er din 'master-div' på siden, så i din HTML-tekst skal de øvrige elementer ligge indenfor:

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

Noget i denne stil:

Kode


<html>

  <head>
  </head>

  <body>
    <div id="container">
      Her placerer du resten af dine elementer
    </div>
  </body>

</html>

MrLES

Indlæg senest redigeret d. 01.09.2009 02:08 af Bruger #15158

Bruger #13771 @ 20.09.09 00:23

En tilføjelse til MrLES CSS.

Du behøver ikke alt det han har brugt, du kan nøjes med:

Kode

div#container {
width: 800px;
height: 600px;
margin: 0px auto;
}

Den kode gør at dit site har en fast størrelse og er centreret.

Indlæg senest redigeret d. 20.09.2009 01:06 af Bruger #13771

Fast størrelse på hjemmeside

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler