---
title: "lägga till div utanför \"sidan\""
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/141770-lägga-till-div-utanför-sidan"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "richardjoha"
published: "2006-01-31T14:21:05.000Z"
updated: "2006-02-01T00:07:16.000Z"
replies: 12
views: 456
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/141770-lägga-till-div-utanför-sidan"
---

# lägga till div utanför "sidan"

## #1 — richardjoha, 2006-01-31T14:21Z

Om ni kollar på den slarviga bifogade mallen.. det är det röda jag inte får ihop..
hur ska jag skriva i min css mall för att kunna lägga in reklam platser som på bilden, har klurat och testat allt jag kan komma på så nu återstår bara er hjälp
folks..

här kommer css 

```
/* stilmallen */

body { margin:0; padding:0; font: 74% "Arial", Helvetica, Tahoma; color:#333333;  background-color:#FFFFFF;}

p { margin: 0; padding: 0; line-height: 1.4em; color: #303030; }
a { color: #0066CF; text-decoration:none;}
a:hover { color:#333; text-decoration:none;}

h1 { padding:0; margin:0; font-size:200%; font-weight: normal; color: #5BB1E6; font-family:"arial", verdana, arial, sans-serif; letter-spacing: -1px; }
h2 { background-color: inherit; color:#808080; font-size:140%; font-weight:bold; margin: 0 0 3px 0; padding:0; }
h2 a { background-color:#FFFFFF; color:#333333; }
h3 { padding:0; margin:0; font-size:100%; font-weight: bold; color: #333333; font-family:"arial", verdana, arial, sans-serif; letter-spacing: 0px; }
h4 { padding:0; margin:0; font-size:110%; font-weight: bold; color: #333333; font-family:"arial", verdana, arial, sans-serif; letter-spacing: 0px; }
h5 { padding:0; margin:0; font-size:140%; font-weight: bold; color: #333333; font-family:"arial", verdana, arial, sans-serif; letter-spacing: 0px; }

.punktlista {list-style-type: circle}

img { border: 0; }
img a { border: 0; }

.content { background-color:#FFFFFF; margin:0 auto 0 auto; padding:0; width:730px;  }

.hmenu { float: right; width: 500px; margin: 0; padding: 18px 12px 10px 10px; text-align: right; border-top: 4px solid #0066CF; }
.hmenu a { border-top: 3px solid #eee; padding: 0.5em 1.2em 5px 1.2em; margin: 0 0.3em 2em 0.3em;  }
.hmenu a:hover { border-top: 3px solid #0066CF; }

.header {  border-top: 4px solid #0066CF; border-bottom: 0px solid #eee; padding: 12px 14px 0px 1em; margin:0; width: 140px; text-align: center; }

.menu { border-bottom: 1px solid #eee; padding: 0px 0px 12px 0px; margin: 0px 0px 0px 0px; }
.menu a { display: block; line-height: 2em; }

.left {  clear: both; font-size: 90%; float:left; width: 150px; padding: 1em 0 1em 1em; }

.past { margin: 0 0 10px 0; padding: 0 0 12px 0; border-bottom: 1px solid #eee; }
.past p { color: #333; }
.past a { display: block; line-height: 2em; }

.new { border-top: 1px solid #eee; margin: 0 0 10px 0; padding: 0 0 12px 0; border-bottom: 1px solid #eee; }
.new p { color: #333; }
.new a { display: block; line-height: 2em; }

.admin { border-bottom: 0px solid #eee; padding: 12px 0px 12px 0px; margin: 0px 0px 0px 0px; }
.admin a { display: block; line-height: 2em; }

.center { float:left; width: 520px; margin: 0 0 10px 30px; padding: 0; }
.center p { font-size: 12px; padding: 3px 0 5px 0; }

.footer { color:#999999; font-size:90%; margin: 5px 0px 10px 0px; padding: 1em; border-top:1px solid #ccc; text-align:left; clear:both;}
.footer .right { float:right; clear:right; text-align:right; }
.footer p { margin:0; padding: 0.4em 0 0 0; color: #333; }

form.search { padding: 0; margin: 0; }
textarea.text { height: 150px; width: 90%; border: 1px solid #ccc; background: #fff; }
textarea.text:hover { border: 1px solid #eee; background: #FFFFF4; }
input.field { border: 1px solid #ccc; background: #fff; width: 200px; }
input.field:hover { border: 1px solid #eee; background: #FFFFF4; }

input.text { margin: 0; width: 88px; border: 1px solid #ccc; background: #FFF; }
input.text:hover { border: 1px solid #81C4EB; }
input.button { height: 20px; margin: 0; font-size: 100%; font-family: Arial; border: 1px solid #CCC; background: none; color: #333; font-weight: bold; }
.date { color: #333; text-align: right; margin: 4px 0 5px 0; padding: 0.4em 0 0 0; background: url(dotted.gif) repeat-x top; }
div.image { padding: 1px; float: left; margin: 0 8px 0 0; border: 3px solid #eee; width: 60px; height: 60px;  }
.comments { padding: 10px 10px 8px 10px; margin: 0 0 10px 0; background: #f8f8f8; }
.commentsbox { padding: 8px 0 10px 10px; margin: 0 0 10px 0; background: #f4f4f4; width: 510px; }
```

Bilagor:

- [mall.jpg](https://www.webforum.nu/a/9517.jpg)

Permalänk: https://www.webforum.nu/p/141770

## #2 — tanten, 2006-01-31T17:12Z

Inte precis lätt att se hur din sida fungerar, med så mycket classer... och inga bestämda divar.
Har du testat att lägga en absolut positionerad div där du vill ha reklamplatsen
typ
\#reklam{
  position: absolute;
  left: 75%;
  top: 250px;
  background-color: #f00;
  height:300px;
}

Sedan kan du lägga in den t.ex sist eller först i bodyn... eftersom den bör vara opåverkad av det andra du har på sidan...
Mycket ungefärliga siffror jag gjort...

Permalänk: https://www.webforum.nu/p/1756429

## #3 — richardjoha, 2006-01-31T17:46Z

Ja, det fungerar ju bra! Men jag kör till exempel 1280\*1024 som upplösning och det gör kanske inte alla som besöker hemsidan.. alltså när man kör 1024\*768 hamnar ju divven 1000 px till höger som jag bestämmt.

finns det något sätt att ta hänsyn till olika upplösningar när man använder absoulta postioner?

Annars behöver jag ett annat sätt... hmm...   ;) 

tack för hjälåen i alla fall :) hoppas på mer förslag..

> **tanten skrev:**
>
> Inte precis lätt att se hur din sida fungerar, med så mycket classer... och inga bestämda divar.
> Har du testat att lägga en absolut positionerad div där du vill ha reklamplatsen
> typ
> \#reklam{
>   position: absolute;
>   left: 75%;
>   top: 250px;
>   background-color: #f00;
>   height:300px;
> }
> 
> Sedan kan du lägga in den t.ex sist eller först i bodyn... eftersom den bör vara opåverkad av det andra du har på sidan...
> Mycket ungefärliga siffror jag gjort...

Permalänk: https://www.webforum.nu/p/1756456

## #4 — tanten, 2006-01-31T18:00Z

Ja det går...

Först ser du till att diven hamnar mitt på sidan med 
margin-left:auto;
margin-right:auto; 
sedan drar du tillbaka den med minuspixlar på en class
.right{
	right: -263px; 370 bör det väl vara...
}
Tror jag skrev rätt nu...

Permalänk: https://www.webforum.nu/p/1756460

## #5 — richardjoha, 2006-01-31T18:07Z

> **tanten skrev:**
>
> Ja det går...
> 
> Först ser du till att diven hamnar mitt på sidan med 
> margin-left:auto;
> margin-right:auto; 
> sedan drar du tillbaka den med minuspixlar på en class
> .right{
> 	right: -263px;
> }
> Tror jag skrev rätt nu...

hmm... men om jag utgår från kodsnutten du skrev innan..

(lite ändrad..)

\#reklam{
position: absolute;
left: 1000px;
top: 215px;
background-color: #f00;
height:300px;
}

antar jag rätt när jag gör så här:

\#reklam{
position: absolute;
margin-left:auto;
margin-right:auto;
background-color: #f00;
height:300px;
}

jag får den nämligen inte i mitten eftersom den tydligen inte kan ligga över den stora mitt divven?! IE bugg?

och fattar inte rikitgt vad du menar med 

"sedan drar du tillbaka den med minuspixlar på en class
.right{
right: -263px;
}
"

Permalänk: https://www.webforum.nu/p/1756462

## #6 — tanten, 2006-01-31T18:14Z

Vart hamnar den då? Eller är det så att du inte ser den bara...
\<div id="reklam" class="right"\>\</div\>
 Såg att du nog bör ha mer än 365px på classen :-) Halva content minst

Permalänk: https://www.webforum.nu/p/1756463

## #7 — tanten, 2006-01-31T18:31Z

Oops. Jag tänkte för snabbt nu. 
Du måste nog använda relative positionering när du ska flytta fram och tillbaka så där...

Permalänk: https://www.webforum.nu/p/1756469

## #8 — richardjoha, 2006-01-31T18:32Z

med denna koden ser det ut såhär..

\#reklam{
position: absolute;
top: 215px;
margin-left:auto;
margin-right:auto;
background-color: #f00;
height:300px;
}

.right{
right: 0
}

Bilagor:

- [1024.jpg](https://www.webforum.nu/a/9522.jpg)
- [1280.jpg](https://www.webforum.nu/a/9523.jpg)

Permalänk: https://www.webforum.nu/p/1756470

## #9 — tanten, 2006-01-31T18:40Z

och vad händer om du gör så här:
\#reklam{
position: relative;
top: 215px;
margin-left:auto;
margin-right:auto;
background-color: #f00;
height:300px;
}

.right{
right:-365px;
}

Permalänk: https://www.webforum.nu/p/1756472

## #10 — tanten, 2006-01-31T18:51Z

Nu testade jag också...

\#reklam{
position: relative;
top: -215px; eller så mycket som behövs
margin-left:auto;
margin-right:auto;
background-color: #f00;
height:300px;
width: 150px; 
clear: both;
}

.right{
right:-365px;
}
Detta fungerade på en sida jag har...

Permalänk: https://www.webforum.nu/p/1756473

## #11 — echoSwe, 2006-01-31T19:02Z

Vad sägs om det här?

99% säker på att det funkar ungefär som du vill ha det.

Bilagor:

- [Untitled-1.jpg](https://www.webforum.nu/a/9525.jpg)
- [layout scetch.gif](https://www.webforum.nu/a/9526.gif)

Permalänk: https://www.webforum.nu/p/1756477

## #12 — richardjoha, 2006-01-31T22:29Z

Tack så mycket för hjälpen gott folk..

fick göra så här för att det skulle fungera:

\#reklam{
position: relative;
top: -335px; 
margin-left:auto;
margin-right:auto;
right: -435px;
background-color: #f00;
height:300px;
width: 130px; 
clear: both;
}

.right{
right:-365px;
}

Permalänk: https://www.webforum.nu/p/1756558

## #13 — echoSwe, 2006-02-01T00:07Z

Jaha... Är det inte lite väl mkt absoluta värden då? Vad händer om du bestämmer dig för att göra din header 50 pixlar högre?

Sedan kanske du kunde visa lite html också.

Permalänk: https://www.webforum.nu/p/1756571

---

Tråden på webben: https://www.webforum.nu/amne/html-css/141770-lägga-till-div-utanför-sidan