http://www.voetbal.frihost.net/v2/aleppo.php staat mijn layout in CSS, zoals jullie zien staat het er als een rommeltje. De layout moet net zo worden als als op http://www.voetbalstadion.nl.tt, daar staaat alles in tabellen. Ik ben wat kleine problemen tegengekomen. Het menu staat te ver naar rechts en staat het iedere link niet in 1 maar in 2 vakjes. Daarnaast aan de rechrkant wordt de achtergrond horizontaal herhaald in het blokje met poll, speler vd maand enz.
Weet iemand hoe ik dit wegwerk. Ik heb mijn hele code afgezocht, maar vind niets.
style.css
Code:
/* Aleppo stylesheet -- a CSS layout demo
* original at http://stijlstek.nl/demo/aleppo/
* copyleft 2004 Ben de Groot -- http://stijlstek.nl/contact
* licensed under the GNU Free Documentation License
* which in layman's terms means you are free to use and modify this stylesheet
* as long as you keep the license notice and credit to the original author intact
*/
/* Let's start with zeroing out any browser default margins and paddings
*/
* {
margin: 0;
padding: 0;
}
/* Next we set the page height, to position the footer at the bottom of the window
* when page is short, and at the bottom of the page when page is longer
*/
html, body {
height: 100%;
background: #fff;
color: #000;
}
body {
text-align: center; /* IE auto margins workaround */
font: 100%/150% serif; /* just some defaults - should be customized */
}
html>body { font-size: 8px; } /* for modern browsers that can resize px */
#wrap {
position: relative; /* to keep the header inside */
height: 100%;
width: 759px; /* you can change this, using %, em or px */
margin: 0 auto; /* auto centers the div */
text-align: left; /* after centering #wrap above we return to normal aligning */
}
#middle {
position: relative;
height: auto;
min-height: 100%; /* for modern browsers, to push the footer down */
border-right: 130px solid #ccc; /* width and background of right column */
border-left: 150px solid #ccc; /* width and background of left column */
margin-bottom: -4em; /* height of footer */
width: 479px;
}
#middle:after { /* this will keep the floats contained, for modern browsers */
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
}
* html #wrap, * html #middle {
height: 100%; /* for IE because it doesn't do min-height */
}
/* Now we set the header, footer and columns...
*/
#header {
position: absolute;
top: 0;
left: 0;
height: 5em;
width: 100%;
overflow: hidden;
z-index: 3; /* to show it on top */
}
#footer {
clear: both; /* just to make sure it comes below the columns */
position: relative;
width: 100%;
height: 1em;
}
#main, #xtra { /* so that the content will not overlap with the header or footer */
padding-top: 5em;
padding-bottom: 4em;
}
#main {
position: relative; /* IE float bug workaround */
float: left;
width: 478px; /* width of #content +1 */
}
#content {
position: relative;
float: right;
width: 477px; /* width of #middle -2 */
}
#nav {
position: relative;
float: left;
width: 130px;
margin-left: -129px; /* width -1 */
}
#xtra {
position: relative;
float: right;
width: 150px;
margin-right: -149px; /* width -1 */
}
* html #xtra { /* addressing some IE bugs */
width: 129px;
margin-top: 0em;
}
* html #xtra, * html #nav, * html #content {
overflow:hidden;
}
/* Some block elements that influence div sizes and positioning
*/
h1 {
font-size: 2em;
margin: .5em 15px;
}
#footer p {
text-align: center;
line-height: 0em;
padding-top: 1em;
margin-top: 0; /* otherwise it pushes footer down */
}
/* And finally giving block elements inside the columns a default margin.
* This prevents the need for a box model hack on all the columns.
* If it wasn't for IE, we could do #nav>*,#content>*,#xtra>* { rules }
*/
h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, form, fieldset, address {
margin: 0em 5px;
}
costumize.css
Code:
/* customize stylesheet
this is used to give the layout some colour
this is not part of the demo and should be customized to your liking */
html, body {
background: #000;
color: #000;
font-family: verdana, serif;
}
#header, #footer {
background: #fff;
}
#middle {
background: #fff;
border-color: #fff;
}
#nav, #xtra {
color: #000;
}
ul {
list-style: square;
margin-left: 28px;
}
Code van aleppo.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Aleppo : 3 column CSS layout demo : Stijlstek.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="customize.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div align="center">
<?PHP include "header.htm"; ?>
</div>
</div>
<div id="middle">
<div id="main">
<div id="content">
<p> Welkom op deze site, hij is nog in aanbouw! We hopen dat u er begrip
voor heeft, onze webmaster is namelijk bezig met een systeem dat CSS
bevat. Het duurt ff om het onder de lnie te krijgen</p>
</div>
<div id="nav">
<?PHP include "menu.htm"; ?>
</div>
</div>
<div id="xtra" xml:lang="en">
<?PHP include "rechts.htm"; ?>
</div>
</div>
<div id="footer">
<p xml:lang="en">copyleft 2004 <a href="http://stijlstek.nl/contact" hreflang="nl">Ben
de Groot</a>, licensed under the <a href="http://stijlstek.nl/fdl-license" hreflang="en" rel="copyright">GNU
Free Documentation License</a></p>
</div>
</div>
</body>
</html>
