contentblok verder ''uitrekken''

Status
Niet open voor verdere reacties.
S

sjoewaps

Gebruiker
Lid geworden
21 feb 2007
Berichten
9
Hallo =)

Voor school ben ik nu bezig met een website voor een kindertijdschrift. Dit is voor mij de allereerste keer dat ik met html/css werk.

De website ziet er nu zo uit:

[smallIMG]http://i48.tinypic.com/nycnx3.png[/smallIMG]


nou wil ik dat bij de ''footer'' (gedeelte met contact en privacy statement), de layout nog een stukje verder doorloopt, dus dat het er zo uit komt te zien: *afbeelding even gemaakt in photoshop*

[smallIMG]http://i49.tinypic.com/2jbo0p.png[/smallIMG]

hoe kan ik dat het beste doen?

alvast bedankt =D
 
Laatst bewerkt door een moderator:
ik heb je plaatjes even aangepast.
ze zijn nu klikbaar zodat ze dan groter worden.
 
Dat is heel moeilijk te zeggen zo. Op het oog zou ik zeggen dat je misschien kunt proberen het deel met de privacy ook binnen dezelfde div als de rest te zeggen. Maar dat is gewoon 'n gok.
Heb je anders 'n link naar de html en css online, of kun je die hier neerzetten?
 
de css
Code: 
body {background-color:#f8f8f8;}

#container {margin: 0 auto; width:944px; }

#header {float:left; width:944px; height:100px }

#logo {float:left; width:160px; height:100px;
		margin: 0 0 0 -9px;}

.navigatie {float:right; width: 600px; height: 100px;
			margin: 25px -83px 0 0;} 



.navigatie ul {
	font-family:"Arial, Helvetica, sans-serif";
	font-size:14px;
	font-weight: bold;
	list-style-type: none;
	}
	
.navigatie ul li{float: left; margin:10px 5px 0 0;}

	a.home {background-image:url(../media/images/button_03.png);
	padding:5px 51px 3px 5px;}
	a.topklas {background-image:url(../media/images/button_05.png);
	padding:5px 79px 3px 5px;}
	a.games {background-image:url(../media/images/button_07.png);
	padding:5px 62px 3px 5px;}
	a.archief {background-image:url(../media/images/button_09.png);
	padding:5px 73px 3px 5px;}
	a.magazine {background-image:url(../media/images/button_11.png);
	padding:5px 86px 3px 5px;}
	a.forum {background-image:url(../media/images/button_13.png);
	padding:5px 61px 3px 5px;}
	
		.home:hover {
			background-position:0px -25px;}
		.topklas:hover {
			background-position:0px -25px;}
		.games:hover {
			background-position:0px -25px;}
		.archief:hover {
			background-position:0px -25px;}
		.magazine:hover {
			background-position:0px -25px;}
		.forum:hover {
			background-position:0px -25px;}

#contentplaceholder {
	float: left;
	width:944px;
	background-image: url(../media/images/container.png);
	background-repeat:repeat-y;
	margin:0 0 0 0;
	}
	

#ribbon {
	background-image:url(../media/images/ribbon.png);
	width:813px;
	height:67px;
	float:left;
	margin:30px 0 0 -6px;
	}

#kop1 {background-image:url(../media/images/blok1.png);
		float:left;
		width:558px;
		height:162px;
		margin: 0px 0 0 14px;
		}
		
#kop2 {background-image:url(../media/images/blok2.png);
		float:left;
		width:558px;
		height:100px;
		margin:1px 0 0 15px;
		}
		
#kop3 {background-image:url(../media/images/blok3.png);
		float:left;
		width:558px;
		height:100px;
		margin:-6px 0 0 15px;
		}

#kop4 {background-image:url(../media/images/blok4.png);
		float:left;
		width:558px;
		height:100px;
		margin:-6px 0 0 15px;
		}
		
#contentright {
		float:right;
		width:380px;
		}

		
#filmpje {background-image:url(../media/images/blokrechts.png);
		float:right;
		width:359px;
		height:339px;
		margin:-451px 15px 0 0;
		}

#poll {background-image:url(../media/images/poll.png);
		float:right;
		width:359px;
		height:115px;
		margin:-116px 15px 0 0;
		}		

#banner {margin:0 auto;
		width:800px;
		height:100px;
		}



.contact {
	float:left;
	height:50px;
	width:944px; 
	margin:100px 0 0 19px;
	}

.contact ul {
	text-align: center;
	font-family:"arial", Gadget, sans-serif;
	font-size: 10px;
	font-weight:100;
	list-style-type: none;
	padding:0;
	
	}
	
.contact ul li{ 
	display:inline;
	margin:0 5px 0 0;}
	
.contact ul li a { 
	color:#666; background-color:#fff;
	text-decoration:none;
	padding:5px;}
	
.contact ul li a:hover {
	color:#000; 
	text-decoration: none;}

de html
Code: 
.<!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>
	
    <!--METADATA-->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="remediate website" />
    <meta name="keywords" content="remediate website, remediate, top magazine" />
    
    <!--CSS-->
    <link href="css/text.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type"text/css" />

    
    <title>Remediate Top-Magazine Webiste</title>
    
</head>

<body>

<div id="container">

	<div id="header">
    	
        <div id="logo">
        	<img src="media/images/logo.png" width="170" height="110" alt="Top Magazine logo" title="Logo" />
        </div>
        
        <div class="navigatie">
        	<ul>
            	<li> <a href="#" class="home"></a> </li>
                <li> <a href="#" class="topklas"></a> </li>
                <li> <a href="#" class="games"></a> </li>
                <li> <a href="#" class="archief"></a> </li>
                <li> <a href="#" class="magazine"></a> </li>
                <li> <a href="#" class="forum"></a> </li>
			</ul>
		</div>
	</div>
    
    

<div id="contentplaceholder">
	<div id="ribbon"><p>Welkom bij top online! De leukste site voor top magazine lezers! Bekijk filmpjes van anderen, speel games en stel en beantwoord vragen op het forum! Veel plezier!</p>
    </div>
  <div id="contentleft">
    	<div id="kop1"> 
        	<h1> dit is kop 1</h1>
       	</div>
        
        <div id="kop2"> 
        	<h2> dit is kop 2</h2>
       	</div>
        
        <div id="kop3"> 
        	<h2> dit is kop 3</h2>
       	</div>
        
        <div id="kop4"> 
        	<h2> dit is kop 4</h2>
       	</div>
	</div>
    
    <div id="contentright">
    	<div id="filmpje">
        	<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/SfK9V24JFkE&hl=nl_NL&fs=1&color1=0x234900&color2=0x4e9e00"></			param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/SfK9V24JFkE&hl=nl_NL&fs=1&color1=0x234900&color2=0x4e9e00" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
		</div>
        
        <div id="poll">
        	Hier komt de poll te staan
       	</div>

	</div>

<div id="banner">
	<img src="media/images/banner.png" height="100" width="800" title="banner" alt="dit is de banner" class="banner" />
</div>

<div class="contact">
	<ul id="ctact">
    	<li> <a href="#"> contact </a> </li>
        <li> <a href="#"> privacy statement </a> </li>
   	</ul>
</div>

</div>
</div>
    






</body>
</html>
 
Ik kan 't helaas met alleen deze html en css niet vinden, omdat ik niet weet welke achtergrond-afbeeldingen welke kleur veroorzaken en zo. Daarvoor zal 't toch online moeten staan. Ik kan de fout nu niet namaken in mijn computer.

Als ik #contentplaceholder 'n achtergrondkleur of border geef, omsluit die alles wat bij jou wit is, dus die onderbreking boven contact en privacystatement is dan weg.
Je zou denken dat dat dan ook zo is als je #contentplaceholder 'n achtergrond-afbeelding geeft. Of zit die onderbreking misschien per ongeluk in de achtergrond-afbeelding?

Als je 't ergens online kunt zetten, kan ik waarschijnlijk wel zien waar 't mis gaat.
Als dat niet kan, probeer dan 'ns geen afbeeldingen te gebruiken, maar in plaats daarvan alles 'n achtergrondkleur te geven. Als 't dan goed gaat, weet je dat 't aan de afbeelding ligt. Als je dan dezelfde kier krijgt kun je de code met de kleuren hier neerzetten en kan ik de fout reproduceren en 'm (hopelijk) oplossen.
Maar makkelijker is als 't online zou staan.

Ook nog de mogelijkheid natuurlijk dat ik gewoon iets mis en dat 'n ander hier intelligenter kan kijken dan ik...
(Hoewel, intelligent kíjken kan ik heel goed.)
 
Laatst bewerkt:
Wat mij opvalt is: <link href="css/layout.css" rel="stylesheet" type"text/css" />.
Je mist hier een = dus: <link href="css/layout.css" rel="stylesheet" type="text/css" />

kweet niet miss maar een foutje bij het kopiëren hoor. T zal ook vast niet fataal zijn.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan