css maximum hoogte
- Onderwerp starter jorennn
- Startdatum
- Status
- Lid geworden
- 1 sep 2002
- Berichten
- 16.494
- Besturingssysteem
- macOS Sequoia
Hmm best lastig, dit is wat ik ervan heb kunnen maken (CSS staat nu in HTML, was makkelijker testen)
Door de footer buiten de container te zetten kreeg ik het een beetje netjes onder elkaar, voor de rest zijn er wat percentage toegevoegd (o.a bij html, body en .container in het CSS)
PHP:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* CSS Document */
html { height:100%}
body {
margin:0px;
height:97.636%;
background-color: #333333;
}
/* layout */
.container {
margin:0 auto;
width:700px;
height:100%;
border-left:1px solid #F4F4F4;
border-right:1px solid #F4F4F4;
background-color:#FFFFFF;
}
#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #FFFFFF;
height: 33px;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
float: left;
display: block;
line-height: 33px;
padding: 0px 5px 0px 5px;
text-decoration: none;
font-weight: bold;
font-size: 15px;
font-family:"Century Gothic", Arial;
color: #44A3F0;
}
#nav #active a {
background:url(/img/nav_active.png) no-repeat center;
}
#nav a:hover {
color: #45B9E4;
}
.header {
float:left;
width:550px;
border-top:1px solid #EBEBEB;
border-bottom:1px solid #EBEBEB;
height:90px;
background-image:url(/img/banner.png);
}
.news {
float:right;
width:141px;
border-left:1px dashed #EBEBEB;
border-top:1px solid #EBEBEB;
border-bottom:1px solid #EBEBEB;
background-color: #FCFCFB;
height:90px;
font-family:"Century Gothic", arial;
font-size:12px;
padding-left:8px;
}
.news span {
font-family:"Century Gothic", Arial;
font-size:26px;
color:#44A3F0;
font-weight:normal;
padding:0px;
margin:0px;
}
.news a {
font-family:"Century Gothic", Arial;
font-size:12px;
color:#44A3F0;
font-weight:normal;
padding:0px;
margin:0px;
}
.main {
padding: 10px 10px 10px 10px;
font-family:Century Gothic, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.main h1 {
font-family:Century Gothic, Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
border-bottom:#EBEBEB 1px solid;
padding-bottom:2px;
color:#1D8BDC;
}
.footer {
margin:0 auto;
width:702px;
border-top:1px solid #EBEBEB;
border-bottom:1px solid #EBEBEB;
background-color: #FCFCFB;
font-family:"Century Gothic", arial;
font-size:12px;
text-align:center;
}
/* news */
.newsitem {
border:#E1E1E1 1px solid;
}
.title {
background-color:#F5F5F5;
padding:0 0 0 5px;
}
.item {
padding:5px 5px 5px 5px;
font-family:Century Gothic, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<ul id="nav">
<li id="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">info</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div class="header"></div>
<div class="news">
<span>news</span><br />
<a>portfolio.</a><br />
Na lang wachten is de site weer online !
</div>
<div class="main">
<p><br /></p>
<p> </p>
<h1>.Home</h1>
<p>Welkom op mijn portfolio, jorenvanhee.be. <br />
Hier kan je al mijn werken vinden die ik tot nu toe gemaakt heb. Als je wil dat er een werk gemaakt wordt voor u, dan moet je contact opnemen. Voor meer informatie daarover kan je beter eens kijken op de info pagina.</p>
<p>Feedback met opmerkingen en/of tips zijn altijd welkom! <br />
Aarzel zeker niet om mij te contacteren met uw vragen en/of opmerkingen! Alle emails worden gelezen en geapprecieerd, dus u ontvangt zo spoedig mogelijk een bericht terug! </p>
<p> </p>
<h1>.Nieuws</h1>
<p>
<div class="newsitem">
<div class="title">Portfolio online 14.03.07 </div>
<div class="item">Na lang wachten is de site weer online. Deze keer onder de vorm van een portfolio. Hier komen dus al mijn werken staan die ik gemaakt zal hebben. Het portfolio zal voor het moment leeg blijven want ik zit in een tamelijk drukke periode, na de examens zal er zeker een werk bijkomen.
</div>
</div>
</div>
</div>
<div class="footer">© jorenvanhee.be </div>
</body>
</html>Door de footer buiten de container te zetten kreeg ik het een beetje netjes onder elkaar, voor de rest zijn er wat percentage toegevoegd (o.a bij html, body en .container in het CSS)
- Status
