Problemen met layout

Status
Niet open voor verdere reacties.
J

jurrian-kaput

Gebruiker
Lid geworden
10 jul 2006
Berichten
81
Mijn website: www.loonbedrijf-kaput.nl/jur.index.php

Op die website zul je zien dat het gedeelt mainframe (grijze blok) te ver naar links staat. Ik heb van alles geprobeerd maar krijg het niet voor elkaar om die mooi in het midden te krijgen.

tweede probleem is het menu. Als je met je muis over de knop foto's gaat dan zul je zien dat het menu achter het grijze blok wegvalt ook dit probleem kom ik niet uit. Kan iemand mij hierbij helpen.

Ik heb mijn stylesheet er al attachment bij gedaan.

Jurrian
 

Bijlagen

jurrian-kaput,
Ik heb wat aan de code gewerkt. Zoals Peter zegt wat betreft uw pos abs die waren dan nog niet goed gespecifieërd. Als je met position absoluut werkt moet je altijd 2 coördinaten hebben ofwel top en right, top en left, bottom en left, bottom en right.Hoe kan je anders absoluut plaatsen met maar een coördinaat
Nu ik heb die weggelaten en gewoon met divs( layers) gewerkt.
Hieronder de html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="beschrijving van de webpagina" />
<meta name="keywords" content="trefwoorden, gescheiden, door, komma's" />
<title>Loonbedrijf Kaput</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css"> 
body { 
    font: 10pt Verdana, Helvetica, sans-serif; 
    margin: 0px; 
} 
</style> 

<script type="text/javascript"> 
var currentlyActive = ""; 

function ShowMenu (menu) { 
    if (currentlyActive != "") 
        document.getElementById(currentlyActive).style.display = "none"; 
         
    document.getElementById(menu).style.display = "block"; 
     
    currentlyActive = menu; 
} 

function HideMenu (menu) { 
    menu.style.display = "none"; 
} 

function RecallMenu (menu) { 
    menu.style.display = "block"; 
} 
</script>  
</head>
<body>

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

	<div id="menu">
<div style="display: block; float: left; width: 49px; height: 15px; left: 0px; border: 0px;"> 
    <a href="home.php"><img src="images/knoppen/home.jpg" alt="" border="0" /></a></div> 
<div style="display: block; float: left; width: 60px; height: 15px; left: 100px; border: 0px;" onmouseover="ShowMenu('menu2');"> 
    <a href="javascript:void(0);"><img src="images/knoppen/foto's.jpg" alt="" border="0" /></a></div> 

<div style="display: block; float: left; width: 84px; height: 15px; left: 100px; border: 0px;" onmouseover="ShowMenu('menu1');"> 
    <a href="occassions.php"><img src="images/knoppen/occassions.jpg" alt="" border="0" /></a></div> 

<div style="display: block; float: left; width: 79px; height: 15px; left: 100px; border: 0px;" onmouseover="ShowMenu('menu1');"> 
    <a href="feedback.php"><img src="images/knoppen/feedback.jpg" alt="" border="0" /></a></div> 

<!--div style="clear: left;"></div--> 
</div> 

<div id="menu2" onmouseout="HideMenu(this);" onmouseover="RecallMenu(this);" style="position: absolute; display: none; z-indez: 1; float: left; background: #CCCCCC; width: 150px; left: 60px; top: 200px; border: 0px;"> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/aardappelen_inschuren.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/aardappelen_poten.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/aardappelen_rooien.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/bieten_frezen.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/bieten_schoffelen.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/bieten_rooien.jpg" alt="" border="0" /></a><br />
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/bieten_zaaien.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/cultiveren.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/kunstmeststrooien.jpg" alt="" border="0" /></a><br />
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/looftrekken.jpg" alt="" border="0" /></a><br />
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/maaidorsen.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/mais_schoffelen.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/ploegen.jpg" alt="" border="0" /></a><br />
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/rugvormer.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/spitten.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/spitten_en_zaaien.jpg" alt="" border="0" /></a><br />
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/spuiten_van_gewassen.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/woelen.jpg" alt="" border="0" /></a><br /> 
    <a href="aardappelen_rooien.php" alt="" /><img src="images/knoppen/looftrekken.jpg" alt="" border="0" /></a><br />
</div> 
<div id="home">
<h1>Welkom op de website van Loonbedrijf Kaput</h1>
<h2>Zoals u ziet is de website totaal vernieuwd</h2>
	</div>
</div>
</body>
</html>
En hier de style.css
Code: 
/* CSS Document */
body {
	background:#6b6876;
	margin-top: 0px;
	padding-top: 0px;	
}

#container {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}

#header{
	width: 900px;
	height:170px;
	background: url(images/header.jpg) no-repeat 50%;
}

#menu{
	width: 900px;
	height: 16px;
	z-index: 10;
}
#home{
	width: 900px;
	height: auto;
	text-align: left;
	z-index: 5;
	background-image: url(images/mainframe.jpg);
	background-repeat: no-repeat;
}

#fotos{
	margin: 5px;
}

#table{
	align: center;
	top: 220;
}
h1{
	font-size: 150%;
	line-height:90%;
	margin: 5px;
  }
h2{
	font-size: 100%;
	margin: 5px;
}
 
Laatst bewerkt:
ik heb te vroeg gejuicht. Ik bekeek vanmorgen de broncode en het idee achter het stukje php dat erin zit is verdwenen. Er waren drie bestanden Header, Home en Footer. IN de header staat het menu zodat deze makkelijk aan te passen is en niet steeds in elke pagina aangepast moet worden. Het Home gedeelte is voor tekst en foto.
Ik wil het wel graag zo houden als dat het was. De indeling bedoel ik dan. Kan iemand mij daarbij helpen. Achteraf gezien had ik dit zelf ook gekund

Jurrian
 
Neen, niet als je de goed werkende code gebruikt.

Nu heb je toch ook het origineel (html) in drieën gesplits voor de php files?

:cool:
 
nee dat heb ik niet ik hem hem weer zo gemaakt als dat die was en het menu werkt nu goed alleen het grijze blok staat nog steeds links en dat zou mooi in het midden meoten staan net zoals de rest
 
jurrian-kaput,
Zoals je nu bezig bent zal het nooit werken.
Met position absolute moet je de placement instellen. Het gaat zo maar niet om in je style position absolute te plaatsen.
Code: 
#header{
	position: absolute;
	width: 900px;
	height: 189px;
	background: url(images/header.jpg) no-repeat 50%;
  }
Waar denk je nu dat position absolute is op het scherm, je moet er een placement aan geven ofwel met top en left of top en right of bottom en left of bottom en right.
Altijd 2 coördinaten instellen dan staat op ieder scherm alles op de zelfde plaats als je weet dat top:0px en left:0px de linker bovenhoek is van ieder scherm.
Met die wetenschap kan je verder beginnen bouwen. Wanneer dan je site te groot is voor een scherm komen de scrollbars er automatisch bij.
Uw header is 189 px hoog, en je plaatje is maar 170px hoog waarom moet die header hoger zijn dan je plaatje?
Uw menu staat 180px van de top van het scherm, maar je header is 189px hoog dus die staan op mekaar.
En ga zo maar door. Dat kan zo niet goed komen, ik heb zo de indruk dat je er met je pet naar slaat gewoon eens zo proberen en nog wat anders proberen en zien wat het resultaat is.
suc6
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan