[css] Positioning t.o.v ander element - Softwareontwikkeling

zaterdag 18 november 2006 17:38

Acties:

Check:www.lowlands .oma-g.com!

Topicstarter

Ik ben bezig met het maken van een website in html, met css. Wat ik probeer te doen is een website met een .gif als achtergrond, daarop het menu en de tekst.
Het idee is alleen, dat als de website op een andere resolutie bekeken wordt, de tekst die ik positioneer met css (de tekst div) nog steeds op de goede plek zitten. Nou is dat niet zo'n probleem als ik het plaatje helemaal linksboven wil plaatsen, maar het plaatje moet dus in het midden bovenaan komen.
Hiervoor moet de tekst dus geplaats worden niet ten opzichte van de zijkant van de browser, maar ten opzichte van het plaatje dat de achtergrond is. Ik ben hiermee al de hele middag bezig, en krijg het maar niet zoals ik het wil. Ik heb wat op internet gezocht en kwam dit tegen:

code:

<html><head><style>
.henk {
  margin: auto;
  width: 800px;
  height: 150px;
  background-color: yellow; 
}
.klaasje {
position: relative;
left: 110px;
top: 100px;
}

</style></head><body>

<div class="henk">
<div class="klaasje">
karel
</div>
</div>

</body></html>

Dit is eigelijk hetzelfde idee, alleen gaat het hier om een geel blok, in plaats van een plaatje. De div die in dit voorbeeld "klaasje" heet, word geplaatst ten opzichte van het gele blok (als het goed is); position; relative. Nou heb ik aan de hand van dit voorbeeld geprobeerd hetzelfde te doen, maar dan met mijn achtergrond:

code:

.background
{
background-position: center top;
background-image: url(pictures/achtergrond.gif);
background-repeat: no-repeat;
height: 567px;
width: 800px
}


.tekst
 {
  position: relative;
  left: 0px;
  top: 50px;
    width: 590px;
    height: 340px;
    background-color: #3e513e;
    color: white; 
    overflow:auto   
     }

Na dit gedaan te hebben kom ik erachter dat het plaatje niet meer in het midden zit, maar links. Ik ben hier een tijd mee bezig geweest, zonder dat ik het werkend kreeg en heb toen nog maar wat gezocht en wat anders geprobeerd:

code:

BODY 
{
font-family: verdana,Arial;
font-size: 12pt;
color: white;
background-color: #c3dff3;
background-attachment: fixed;
background-image: url(pictures/achtergrond.gif);
background-repeat: no-repeat;
background-position: center top;
}

.tekst
 {
  position: relative;
  left: 0px;
  top: 145px;
    width: 590px;
    height: 340px;
    background-color: #3e513e;
    color: white; 
    overflow:auto   
     }

Dit leek in eerste instantie te werken, kreeg de tekst op de goede plaats, maar wat bleek tot mijn schrik? Niet ten opzichte van het achtergrondplaatje, maar ten opzichte van de zijkant van de browser

Ik heb momenteel geen flauw idee wat ik fout doe, of wat nou eigelijk de goede manier is om het effect dat ik wil verkrijgen, te realiseren.

n.b: Sorry dat de topictitel wat aan de wazige kant is.

[CM] Flightcase Mod

zaterdag 18 november 2006 18:34

Acties:

tombo_inc

uhuh

het idee is dat je een parent container maakt die je jouw achtergrond afbeelding geeft. je tekst en overige content plaats je dan in je parent container, en kun je zo relatief positioneren. de parent container zet je vervolgens midden op je scherm.

vb:

HTML:

//body van pagina
<div id="parentcontainer">
  <div id="contentcontainer">
    content hier
  </div>
</div>

Cascading Stylesheet:

#parentcontainer {
  position: absolute;
  left: 50%;
  top: 0px;
  margin-left:-300px;
  width: 600px;
}

#contentcontainer {
  position: relative;
  left: 0px;
  top: 0px;
}

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

zaterdag 18 november 2006 19:48

Acties:

Gnuitenjong

Check:www.lowlands .oma-g.com!

Topicstarter

tombo_inc schreef op zaterdag 18 november 2006 @ 18:34:
het idee is dat je een parent container maakt die je jouw achtergrond afbeelding geeft. je tekst en overige content plaats je dan in je parent container, en kun je zo relatief positioneren. de parent container zet je vervolgens midden op je scherm.

vb:
HTML:
1
2
3
4
5
6
//body van pagina
<div id="parentcontainer">
  <div id="contentcontainer">
    content hier
  </div>
</div>
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
#parentcontainer {
  position: absolute;
  left: 50%;
  top: 0px;
  margin-left:-300px;
  width: 600px;
}

#contentcontainer {
  position: relative;
  left: 0px;
  top: 0px;
}

Ik zat er dus erg dichtbij ^^
Heb het nu in elk geval werkend, heel erg bedankt.

[CM] Flightcase Mod