webForumDet fria alternativet

div-problem: absoluta värden vs. dynamiska värden

2 svar · 290 visningar · startad av costodia

costodiaMedlem sedan aug. 2000864 inlägg
#1

Först: I forumreglena står det att man ska söka i forumet först innan man frågar, problemet för mig är att jag inte riktigt vet vad jag ska söka på, eftersom jag inte riktigt vet vad det heter.

Nu: Mitt problem är att på sidan http://www.sveriges.com/eannons/boktips.asp som är en ssi-sida på http://www.sveriges.com/eannons/ så vill jag ha de båda lagrena så att de ligger på samma ställe i förhållade till varandra istället för att specificera precis var de ska vara som jag gjort på boktips.asp enligt denna principen:

<div style="position: absolute; width: 120px; height: 1900px; z-index: 2; left: 1px; top: 333px" id="layer2">

I Blogger:s css så är detta gjort på något vis, jag vet inte riktigt hur.

CheguelinMedlem sedan juli 2003303 inlägg
#2

Jag förstår inte riktigt vad du menar. Vill du inte positionera divarna så får du ta och floata dem bredvid varandra. Ser ut som att tre divs bredvid varandra är vad du vill ha.

css

div#left-column, div#presentation, div#right-column {
    float: left;
}

div#left-column, div#right-column {
    width: 20%;
}

div#presentation {
    width: 60%;
}

html

<div id="left-column">
  Vänster kolumn
</div>

<div id="presentation">
  Presentation
</div>

<div id="right-column">
  Höger kolumn
</div>
costodiaMedlem sedan aug. 2000864 inlägg
#3

jag vet inte riktigt själv hur jag ska uttrycka mig efetrsom css är så främmande för mig, men tipset om hur jag kunde göra på min hundsida var bra,det ska jag testa.

En annan sak jag fudnerar över är blogger:s css som ser ut så här:

/*
-----------------------------------------------
Blogger Template Style
Name:     Dots
Designer: Douglas Bowman
URL:      [url]www.stopdesign.com[/url]
Date:     24 Feb 2004

Modified by:       Martin Persson
Modified Name:     MittInternet Style
Modified URL:     MittInternet.com
Date:     25 Jun 2004
----------------------------------------------- */

body {
  background:#F9F8F3 url("http://sveriges.com/blankhorlin.gif") 50% 0;
  margin:0;
  padding:0 10px;
  text-align:center;
  font:x-small Verdana,Sans-serif;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;
  }

/* Page Structure
----------------------------------------------- */
#content {
  background:url("http://sveriges.com/blankhorlin.gif") no-repeat 250px 50px;
  width:700px;
  margin:0 auto;
  padding:10px 0;
  text-align:left;
  }
#main {
  width:450px;
  padding:10px 0 20px;
  font-size:85%;
  }
#main2 {
  background:url("http://sveriges.com/blankhorlin.gif") -100px -100px;
  padding:10px 10px 15px;
  }
#sidebar {
  width:200px;
  float:left;
  font-size:85%;
  padding-bottom:20px;
  }
#sidebar2 {
  background:url("http://sveriges.com/blankhorlin.gif") 150px -50px;
  padding:5px 10px 15px;
  width:200px;
  width/* */:/**/180px;
  width: /**/180px;
  }
#sidebar3 {
  background:url("http://sveriges.com/blankhorlin.gif") 150px -50px;
  padding:5px 10px 15px;
  width:200px;
  width/* */:/**/180px;
  width: /**/180px;
  }
html>body #main, html>body #sidebar {
  /* We only give this fade from white to nothing to
     browsers that can handle 24-bit transparent PNGs  */
  background/* */:/**/url("http://sveriges.com/blankhorlin.gif") repeat-x left bottom;
  }

/* Title & Description
----------------------------------------------- */
#blog-title {
  margin:0 0 .5em;
  font:250%/1.4em Georgia,Serif;
  color:#353;
  }
#blog-title a {
  color:#353;
  text-decoration:none;
  }
#description {
  margin:0 0 1.75em;
  color:#996;
  }

/* Links
----------------------------------------------- */
a:link {
  color:#663;
  }
a:visited {
  color:#000000;
  }
a:hover {
  color:#7C7C43;
  }
a img {
  border-width:0;
  }

/* Posts
----------------------------------------------- */
.date-header {
  margin:0 0 .75em;
  padding-bottom:.35em;
  border-bottom:1px dotted #9b9;
  font:95%/1.4em Georgia,Serif;
  text-transform:uppercase;
  letter-spacing:.3em;
  color:#663;
  }
.post {
  margin:0 0 2.5em;
  }
.post-title {
  margin:.25em 0;
  font:bold 130%/1.4em Georgia,Serif;
  color:#333;
  }
.post-title a, .post-title strong {
  background:url("http://sveriges.com/bilder/030227/fyrkant_ljusbla.gif") no-repeat 0 .25em;
  display:block;
  color:#333;
  text-decoration:none;
  padding:0 0 1px 45px;
  }
.post-title a:hover {
  color:#000;
  }
.post p {
  margin:0 0 .75em;
  line-height:1.6em;
  }
p.post-footer {
  margin:0;
  text-align:right;
  }
p.post-footer em {
  display:block;
  float:left;
  text-align:left;
  font-style:normal;
  color:#996;
  }
a.comment-link {
  /* IE5.0/Win doesn't apply padding to inline elements,
     so we hide these two declarations from it */
  background/* */:/**/url("http://sveriges.com/bilder/030227/fyrkant_rod.gif") no-repeat 0 .25em;
  padding-left:15px;
  }
html>body a.comment-link {
  /* Respecified, for IE5/Mac's benefit */
  background:url("http://sveriges.com/bilder/030227/fyrkant_rod.gif") no-repeat 0 .25em;
  padding-left:15px;
  }
.post img {
  margin:0 0 5px 0;
  padding:4px;
  border:1px solid #cca;
  }

/* Comments
----------------------------------------------- */
#comments {
  margin:0;
  }
#comments h4 {
  margin:0 0 10px;
  border-top:1px dotted #9b9;
  padding-top:.5em;
  font:bold 110%/1.4em Georgia,Serif;
  color:#333;
  }
#comments-block {
  line-height:1.6em;
  }
.comment-poster {
  background:url("http://sveriges.com/blankhorlin.gif") no-repeat 2px .35em;
  margin:.5em 0 0;
  padding:0 0 0 20px;
  font-weight:bold;
  }
.comment-body {
  margin:0;
  padding:0 0 0 20px;
  }
.comment-body p {
  margin:0 0 .5em;
  }
.comment-timestamp {
  margin:0 0 .5em;
  padding:0 0 .75em 20px;
  color:#996;
  }
.comment-timestamp a:link {
  color:#996;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

/* More Sidebar Content
----------------------------------------------- */
.sidebar-title {
  margin:4em 0 .75em;
  padding-bottom:.35em;
  border-bottom:1px dotted #9b9;
  font:95%/1.4em Georgia,Serif;
  text-transform:uppercase;
  letter-spacing:.3em;
  color:#663;
  }
#sidebar p {
  margin:0 0 .75em;
  line-height:1.6em;
  }
#sidebar ul {
  margin:.5em 0 1em;
  padding:0 0px;
  list-style:none;
  line-height:1.5em;
  }
#sidebar ul li {
  background:url("http://sveriges.com/bilder/030227/fyrkant_brun.gif") no-repeat 3px .45em;
  margin:0;
  padding:0 0 5px 15px;
  }
#sidebar p {
  margin:0 0 .6em;
  }

/* Profile
----------------------------------------------- */
.profile-datablock {
  margin:0 0 1em;
  }
.profile-img {
  display:inline;
  }
.profile-img img {
  float:left;
  margin:0 8px 5px 0;
  border:4px solid #cc9;
  }
.profile-data {
  margin:0;
  line-height:1.5em;
  }
.profile-data strong {
  display:block;
  }
.profile-textblock {
  clear:left;
  }

/* Footer
----------------------------------------------- */
#footer {
  clear:both;
  padding:15px 0 0;
  }
#footer hr {
  display:none;
  }
#footer p {
  margin:0;
  }

här används inte % om du använder i din css-kod som i

div#left-column, div#presentation, div#right-column {
    float: left;
}

div#left-column, div#right-column {
    width: 20%;
}

div#presentation {
    width: 60%;
}

Det jag är ute efter att ändra i denna stilmallen är så att "Google Adwords"-utrymmet lägger sig bredvid "äldre inlägg" istället för under på min sida http://www.mittinternet.com/

går det?

128 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)