CSS positioneren beginners vraag - Softwareontwikkeling

woensdag 9 januari 2008 16:16

Acties:

Topicstarter

Ik heb een pagina gemaakt met de volgende code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <title>CSS test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <style type="text/css"><!--
body {
    background-image:  url(images/backscheef.gif);
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-position:  5px -100px; }
body,  td,  th {
    font-family: "Times New Roman", Times, serif;
    font-size: 10px;
    color: #000000; }
a:link {
    color: #666666;
    text-decoration: none; }
a:visited {
    text-decoration: none;
    color: #666666; }
a:hover {
    text-decoration: none;
    color: #ff0000; }
a:active {
    text-decoration: none;
    color: #0000ff; }
.style1 {
    font-size: 14px  }
--></style>
        <script type="text/JavaScript" language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
    </head>

    <body>
        <div id="UNDER_CONSTRUCTION" style="position:absolute; left: 10px; top: 10px; width:1000; height:55px; z-index:3; font-size: 36px; color: #FF0000;">THIS SITE IS UNDER CONSTRUCTION!</div>
        <div id="Logo" style="position:absolute; left: 215px; top: 60px; width:244px; height:55px; z-index:3; background-color: #FFFF66;"><div align="center"><a href="index.htm" target="_parent">LOGO</a></div></div>
        <div id="Links" style="position:absolute; left: 50px; top: 115px; width:270px; height:375px; z-index:2; background-color: #CCCCCC; border: 3px solid yellow;">Foto Links</div>
        <div id="Rechts" style="position:absolute; left: 360px; top: 60px; width:400px; height:380px; z-index:1; background-color: #CCCCCC; border: 3px solid yellow;"><div align="right">Foto Rechts</div></div>
        <div id="Link 1" style="position:absolute; left: 286px; top: 183px; width:100px; height:18px; z-index:6; color: #FFFFFF; font-size: 18px; font-weight: bold;">Link 1</div>
        <div id="Link 1_Black" style="position:absolute; left: 288px; top: 185px; width:100px; height:18px; z-index:5; color: black; font-size: 18px; font-weight: bold;">Link 1</div>
        <div id="Link 2" style="position:absolute; left: 256px; top: 233px; width:200px; height:18px; z-index:6; color: #FFFFFF; font-size: 18px; font-weight: bold;">Link 2</div>
        <div id="Link 2_Black" style="position:absolute; left: 258px; top: 235px; width:200px; height:18px; z-index:5; color: black; font-size: 18px; font-weight: bold;">Link 2</div>
        <div id="Link 3" style="position:absolute; left: 236px; top: 283px; width:200px; height:18px; z-index:6; color: #FFFFFF; font-size: 18px; font-weight: bold;">Link 3</div>
        <div id="Link 3_Black" style="position:absolute; left: 238px; top: 285px; width:200px; height:18px; z-index:5; color: black; font-size: 18px; font-weight: bold;">Link 3</div>
        <div id="Link 4" style="position:absolute; left: 226px; top: 333px; width:200px; height:18px; z-index:6; color: #FFFFFF; font-size: 18px; font-weight: bold;">Link 4</div>
        <div id="Link 4_Black" style="position:absolute; left: 228px; top: 335px; width:200px; height:18px; z-index:5; color: black; font-size: 18px; font-weight: bold;">Link 4</div>
        <div id="Link 5" style="position:absolute; left: 246px; top: 383px; width:200px; height:18px; z-index:6; color: #FFFFFF; font-size: 18px; font-weight: bold;">Link 5</div>
        <div id="Link 5_Black" style="position:absolute; left: 248px; top: 385px; width:200px; height:18px; z-index:5; color: black; font-size: 18px; font-weight: bold;">Link 5</div>
        <div id="Button1" style="position:absolute; left: 360px; top: 456px; width:197px; height:18px; z-index:4; background-color: #A8C990; padding: 2px 0px 0px 0px"><div class="style1" align="center">Button 1</div></div>
        <div id="Button2" style="position:absolute; left: 569px; top: 456px; width:197px; height:18px; z-index:4; background-color: #80B461; padding: 2px 0px 0px 0px"><div class="style1" align="center">Button 2</div></div>
        <div id="Button3" style="position:absolute; left: 360px; top: 486px; width:197px; height:18px; z-index:4; background-color: #A8C990; padding: 2px 0px 0px 0px"><div class="style1" align="center">Button 3</div></div>
        <div id="Button4" style="position:absolute; left: 569px; top: 486px; width:197px; height:18px; z-index:4; background-color: #80B461; padding: 2px 0px 0px 0px"><div class="style1" align="center">Button 4</div></div>
        <div id="Button3" style="position:absolute; left: 360px; top: 516px; width:197px; height:18px; z-index:4; background-color: #A8C990; padding: 2px 0px 0px 0px"><div class="style1" align="center">Button 5</div></div>
        <div id="Button4" style="position:absolute; left: 569px; top: 516px; width:197px; height:18px; z-index:4; background-color: #80B461; padding: 2px 0px 0px 0px"><div class="style1" align="center">Button 6</div></div>
    </body>

</html>

Nu wil ik de pagina graag centreren in de browser zoals hier bijvoorbeeld:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>TEST</title>
<style type="text/css" media="screen"><!--
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}   
body{
background-color:#666666;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
#wrapper { height: 480px; width: 770px; background-color:#ffffff; margin:auto; border: solid 1px #000000; }
#laag1 { height: 100px; width: 100px; left: 10px; top: 20px; position: relative; visibility: visible; border: solid 1px #000000;}
--></style>
    </head>
    <body>
        <div id="wrapper">WRAPPER
            <div align="left"><div id="laag1">CONTENT</div>
        </div>
    </body>
</html>

Is er een mogelijkheid om de eerste pagina in de tweede te plaatsen? Ik heb al aardig wat zitten google-en maar zie door de bomen het bos niet meer. Hoop dat iemand dit uit kan leggen zodat ik eindelijk eens echt (goed) met CSS aan de slag kan. Ben een beginner m.b.t. CSS en het kwartje wil maar niet vallen.

woensdag 9 januari 2008 16:19

Acties:

Dennahz

Life feels like hell should.

HTML:

1 2	margin-left: auto; margin-right: auto;

Op je container moet werken. Of ik lees even te snel en begrijp je vraag verkeerd.

[ Voor 39% gewijzigd door Dennahz op 09-01-2008 16:19 ]

Twitter

woensdag 9 januari 2008 16:21

Acties:

disjfa

be

Begin opnieuw en zet de eerste 10 maanden dat je sites aan het bouwen bent geheel en nooit nergens position:absolute.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 9 januari 2008 16:29

Acties:

Merijn70

Topicstarter

disjfa schreef op woensdag 09 januari 2008 @ 16:21:
Begin opnieuw en zet de eerste 10 maanden dat je sites aan het bouwen bent geheel en nooit nergens position:absolute.

Ok, dat wil ik best doen maar hoe kan ik er dan voor zorgen dat de elementen zoals op de eerste pagina precies zoals ze nu zijn bij elkaar blijven. Misschien kan je een voorbeeldje geven? En dit alles dan natuurlijk het liefst gecentreerd in de browser.

woensdag 9 januari 2008 16:29

Acties:

Tsunameh

Dennahz schreef op woensdag 09 januari 2008 @ 16:19:
HTML:
1
2
margin-left: auto; 
margin-right: auto;
Op je container moet werken. Of ik lees even te snel en begrijp je vraag verkeerd.

Dat werkt niet lekker in IE
Ik gebruik meestal:

Cascading Stylesheet: test.css

body {
min-width: **breedte van element dat gecentreerd word, bijv een wrapper**
}

**element dat gecentreerd moet worden** {
width: **zelfde breedte als bij min-width:**;
margin-left: auto;
margin-right: auto;
}

Naar mijn weten werkt dit vrijwel altijd goed

[ Voor 17% gewijzigd door Tsunameh op 09-01-2008 16:30 ]

Wat is een ander woord voor synoniem?

woensdag 9 januari 2008 16:46

Acties:

Merijn70

Topicstarter

Het centreren moet wel gaan lukken denk ik. Nu nog de vraag hoe ik de div-jes van mijn eerste pagina in de wrapper van de tweede krijg en hoe ik voorkom om het absolute attribuut te gebruiken maar er wel voor zorg dat alles op z'n plaats blijft (en elkaar dus bij het logo en de rechter foto overlapt).

woensdag 9 januari 2008 16:50

Acties:

TeeDee

CQB 241

Cascading Stylesheet:

body {
text-align: center; /* pak IE5? nog even mee...*/
}
#container {
margin:0 auto;
text-align:left;
width:780px; /* bijvoorbeeld*/
}

Vervolgens je html opzet:

HTML:

<html>
<body>
<div id="container">
<!-- vervolgens al de div's uit je eerste html -->
</div>
</body>
</html>

Denk nog even aan je doctype etc.

offtopic:
zo te zien werk je met Dreamweaver. Probeer deze zo min mogelijk te laten genereren. Je hebt namelijk last van diveritus.

[ Voor 15% gewijzigd door TeeDee op 09-01-2008 16:55 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 14 januari 2008 09:54

Acties:

Merijn70

Topicstarter

TeeDee schreef op woensdag 09 januari 2008 @ 16:50:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
body {
text-align: center; /* pak IE5? nog even mee...*/
}
#container {
margin:0 auto;
text-align:left;
width:780px; /* bijvoorbeeld*/
}
Vervolgens je html opzet:
HTML:
1
2
3
4
5
6
7
<html>
<body>
<div id="container">

</div>
</body>
</html>
Denk nog even aan je doctype etc.

offtopic:
zo te zien werk je met Dreamweaver. Probeer deze zo min mogelijk te laten genereren. Je hebt namelijk last van diveritus.

Heb het aangepast volgens je aanwijzingen maar de content blijft nu gewoon links staan. Ben bang dat het inderdaad door het "absolute" atribuut komt maar ik snap nog steeds niet hoe ik op een andere manier de layout kan krijgen zoals ik dat wil (maar dan wel gecentreerd).
HTML & CSS

maandag 14 januari 2008 21:10

Acties:

f.v.b

disjfa schreef op woensdag 09 januari 2008 @ 16:21:
Begin opnieuw en zet de eerste 10 maanden dat je sites aan het bouwen bent geheel en nooit nergens position:absolute.

Hehe.

En na die tien maanden ben je er achter dat je ook best zonder position: absolute kunt leven en dat je pagina's niet bij het minste of geringste uit elkaar vallen.

Merijn70 schreef op maandag 14 januari 2008 @ 09:54:
[...]

Heb het aangepast volgens je aanwijzingen maar de content blijft nu gewoon links staan. Ben bang dat het inderdaad door het "absolute" atribuut komt maar ik snap nog steeds niet hoe ik op een andere manier de layout kan krijgen zoals ik dat wil (maar dan wel gecentreerd).

Je hebt nog een position: relative nodig. Die zorgt ervoor dat de berekening van position: absolute ten opzichte van de gecentreerde #container gebeurt:

code:

#container
{
  margin:0 auto;
  text-align:left;
  width:780px; /* bijvoorbeeld*/
  position: relative;
}

Don't erase all files?
[Yes] [No]

woensdag 16 januari 2008 13:53

Acties:

Merijn70

Topicstarter

f.v.b schreef op maandag 14 januari 2008 @ 21:10:
[...]

Hehe. En na die tien maanden ben je er achter dat je ook best zonder position: absolute kunt leven en dat je pagina's niet bij het minste of geringste uit elkaar vallen.

[...]

Je hebt nog een position: relative nodig. Die zorgt ervoor dat de berekening van position: absolute ten opzichte van de gecentreerde #container gebeurt:
code:
1
2
3
4
5
6
7
#container
{
  margin:0 auto;
  text-align:left;
  width:780px; /* bijvoorbeeld*/
  position: relative;
}

Helemaal top! die laaatste position: relative was inderdaad de sleutel

De achtergrond bleef nog wel staan maar dit heb ik opgelost door ook deze gewoon maar in een DIV-je te plaatsen. Heel veel dank $_/-\o_$

woensdag 16 januari 2008 17:54

Acties:

kaydie

Artikel: Web Design 101: Positioning
Tommy Olsson

Aanrader!