CSS/Div vraag

Door kitty N op 27-03-2009 15:25

3.373 views

Hallo,

Ik ben momenteel bezig met een site, waarbij ik gebruik maak van div. Ik heb de volgende div's:
- Kop
- Voet
- Menu (zit in navigatie)
- Content (hierin heb ik nog een iframe zitten met de naam tekst, die dus over de gehele content te zien moet zijn).

de css ziet er als volgt uit:


@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}

body {
margin: 0;
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
color: black;
height: 100%;
/* width: 100%; */
}

#kop {
background-color: #666;
color: white;
text-align:center;
font-family: Georgia, Times, "Times New Roman", serif;
height:70px;
font-size: 19px;
border: 1px solid #333;
}

#navigatie {
float: left;
width: 160px;
/*
height:410px; 
*/
height: 100%;
margin-left: 0px;
background-color:#CCCCCC;
border-color:red;
padding-top: 0.5em;
border-right: 1px solid black;
border-left: 1px solid black;
}

#inhoud {
/* margin: 0 2em 0 160px; */
margin: 0 0 0 0px; 
text-align:center;
font-size:13px;
height: 100%;
padding-top: 0.5em;
/* border: 1px solid #333; */
}

#footer {
clear: both;
background-color: #ccc;
text-align:center;
font-size:11px;
padding-bottom: 1em;
border: 1px solid #333;
padding-left: 50px;
height:25px;
widht: 100%;
}

.menulines{
font-family: Georgia, Times, "Times New Roman", serif;
border:2.5px solid #F0F0F0;
}

.menulines a{
font-family: Georgia, Times, "Times New Roman", serif;
text-decoration:none;
color:#666666;
}

#menu {
margin-left: 6px;
}

.h1 {
font-size:16px;
}

De div's:


<div id="kop"></div>
<div id="navigatie">
     <div id="menu">       
     </div>
</div>
<div id="inhoud"><iframe frameborder="1" marginheight="0" marginwidth="0" src="tekst.php" name="tekst"></iframe></div>
<div id="footer"></div>

Ik heb nu dat de kop over de breedte is, navigatie en inhoud naast elkaar, footer over de breedte, alleen de hoogte staat nu op 100% van navigatie en inhoud, waardoor hij het scherm hoogte als 100% neemt, ik krijg dus een scroll balk omdat de kop en footer nog bovenop die 100% komen.

In firefox staat de inhoud niet naast de navigatie, maar onder de pagina (dwars door de footer heen).

Ik hoop dat mijn probleem een beetje duidelijk is uitgelegt.

Jurgen assaasas

30-03-2009 14:05

Je kunt ook gewoon met procenten werken dan blijft hij altijd in verhouding.

kitty N

30-03-2009 14:08

@ Jurgen,

Ik zal het daar eens mee proberen, dit doe ik zodra ik thuis ben kan het dan op 3 verschillende scherm(groottes) testen. Het hoeft namelijk geen proffesionele site te zijn.

Rene Sn

30-03-2009 14:38

@Silvia,

Ik ben daar lang lang lang geleden ook eens flink mee aan het 'zooien' geweest.
Schiet me net pas wat te binnen wat bij mij 't probleem toen de tijd was.

zie : http://swf2.sq4.nl/silvia/index2.php
Dat ziet er niet uit...
Hieronder zie je de <!DOC tag....


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://swf2.sq4.nl/silvia/index.php
Dit ziet er al een stuk beter uit :P (teminste bij mij) ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

in de css heeft de body een margin van 5px, maar dat had ik ff gedaan om te zien of het ook netjes in 't scherm komt.

http://swf2.sq4.nl/silvia/silvia.css dit is de css met hier en daar wat aanpassingen

Ik hoop dat je d'r wat mee kunt Groetjes,
René

kitty N

30-03-2009 14:50

@ Ren,

Bedankt :) Ik ga hier mee aan de slag, heb de css overgenomen, maar ik zie dat jij ook tabbelen hebt gebruikt, dus dat ga ik nog even veranderen. (dat het bij mij ook tabbelen zijn)

Rene Sn

30-03-2009 15:26

kitty schreef op 30.03.2009 14:50
@ René,
Bedankt :) Ik ga hier mee aan de slag, heb de css overgenomen, maar ik zie dat jij ook tabbelen hebt gebruikt, dus dat ga ik nog even veranderen. (dat het bij mij ook tabbelen zijn)

Ja ik heb destijds ook gekozen voor tabellen omdat firefox en opera dacht ik, er anders een zooitje van maakte.
En zoals je ziet in http://swf2.sq4.nl/silvia/index.php, wanneer je nu je browser window groter/kleiner maakt dat de layout zich aanpast.

pim Willems schreef op 28.03.2009 18:38
Ipv iFrame zou je trouwens beter een php include kunnen gebruiken, werkt makkelijker mooier en sneller.

zoals pim schreef : en met include werken heeft nog meer voordelen je maakt simpel je content pagina`s aan desnoods als "wiebenik.txt" zonder welke headers etc.

en op de plaats van * inhoud * zet je < ? include("wiebenik.txt") ? > hoewel het natuurlijk veel netter is om het zo te maken dat je niet de pagina met een variable werkt.

<?php
$pagina_naam=$_GET['p'];
if (!file_exists($pagina_naam.".txt")) {
$pagina_naam="bestaat_niet";
}
?>
* inhoud * vervang je dan voor < ? include($pagina_naam.".txt") ? >

aanroep is dan http://swf2.sq4.nl/silvia/index.php?p=wiebenik
de bovenstaande link, werkt al zoals ik het hier heb uitgelegd.
je moet dan wel zelf nog even bestaat_niet.txt aanmaken.

Groetjes,
René

kitty N

30-03-2009 15:32

René,

Ik ben nu bezig met jou css en tabbelen, het ziet er al een stuk beter uit. Helaas ben ik nog niet thuis en kan het dus nog niet uploaden. De footer blijft nu staan. Werk nu gelijk met includes zodat ik geen iframe hoef te gebruiken. Ik heb alleen nog 1 vraag, ik heb de inhoud nu ook op 100% gezet net als navigatie, loopt dus nu ook mooi door tot aan de footer. Ben nu alleen nog aan het puzzelen om hem dan in de breedte ook helemaal te vullen.

Groetjes Kitty

Rene Sn

30-03-2009 15:36

@kitty, Ken ik beter even bekijken wanneer je thuis bent en het online hebt geplaatst. Want zo met de beschrijving snap ik effe niet wat je bedoeld. ;-)

Grts. René

kitty N

30-03-2009 15:42

@ Rene, is goed. In ieder geval bedankt voor je moeite. Tussen half 6 en 6 uur staat het online.

Het staat nu online. Zoals je ziet heb ik om de inhoud even een border gezet zodat ik kan zien tot waar deze loopt. Graag zou ik willen dat de inhoud ook helemaal uitgelijnd wordt naar rechts. Dus ook beeldvullend. (net als de kop en voet)

Misschien begrijp je nu wat ik bedoel?

Rene Sn

30-03-2009 19:04

kitty schreef op 30.03.2009 15:42
@ Rene, is goed. In ieder geval bedankt voor je moeite. Tussen half 6 en 6 uur staat het online.

Het staat nu online. Zoals je ziet heb ik om de inhoud even een border gezet zodat ik kan zien tot waar deze loopt. Graag zou ik willen dat de inhoud ook helemaal uitgelijnd wordt naar rechts. Dus ook beeldvullend. (net als de kop en voet)

Misschien begrijp je nu wat ik bedoel?

Dit gaat automatisch wanneer je het <iframe> verhaal vervangt voor de oplossing zoals ik die al eerder heb uitgelegd, paar berichten terug. include verhaal.

http://swf2.sq4.nl/silvia/index.php?p=wiebenik enz.

als je de php source wilt zien van index.php
http://swf2.sq4.nl/silvia/index.phps

* EDIT *

Oeps werkt effe niet..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?php
$pagina_naam=$_GET['p'];
if (!file_exists($pagina_naam.".txt")) {
	$pagina_naam="bestaat_niet";
}
?>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Silvia Lombarts</title>
        <link rel="stylesheet" type="text/css" href="silvia.css" />
		
<script language="JavaScript1.2" type="text/javascript">
//<![CDATA[
                
                function over_effect(e,state)
                {
                        if (document.all)
                        source4=event.srcElement
                        else if (document.getElementById)
                        source4=e.target
                        if (source4.className=="menulines")
                        source4.style.borderStyle=state
                        else
                        {
                                while(source4.tagName!="TABLE")
                                {
                                        source4=document.getElementById? source4.parentNode : source4.parentElement
                                        if (source4.className=="menulines")
                                        source4.style.borderStyle=state
                                }
                        }
                }

                function UR_Start() 
                {
                        UR_Nu = new Date;
                        UR_Indhold = showFilled(UR_Nu.getHours()) + ":" + showFilled(UR_Nu.getMinutes()) + ":" + showFilled(UR_Nu.getSeconds());
                        document.getElementById("ur").innerHTML = UR_Indhold;
                        setTimeout("UR_Start()",1000);
                }
                function showFilled(Value) 
                {
                        return (Value > 9) ? "" + Value : "0" + Value;
                }
//]]>
</script>
	</head>

    
<body onload="UR_Start()">
<div id="north">
<table cellSpacing=0 cellPadding=0 border="0" height="100%" width="100%">
<tbody>
<tr><td  height="70" valign="top" >
<div id="kop">Silvia Lombarts</div>
 </td></tr>
 <tr><td valign="top" >
<div id="navigatie"> 
 <div id="menu">
     <table onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">
      <tr> 
        <td width="140" bgcolor="#E6E6E6"><font family: Georgia, Times, "Times New Roman", serif; size="3"><b>Menu</b></font></td>
      </tr>
      <tr> 
        <td width="140" class="menulines"><font face="Arial" size="2"><a href="tekst.php" target="tekst">Home</a></font></td>

      </tr>
      <tr> 
        <td width="100%" class="menulines"><font face="Arial" size="2"><a href="wiebenik.php" target="tekst">Wie 
          ben ik?</a></font></td>
      </tr>
      <tr> 
        <td width="100%" class="menulines"><font face="Arial" size="2"><a href="stage.php" target="tekst">Stage</a></font></td>
      </tr>
      <tr> 
        <td width="100%" class="menulines"><font face="Arial" size="2"><a href="links.php" target="tekst">Links</a></font></td>

      </tr>
    </table>

 </div>
</div>
<div id="inhoud"><? include($pagina_naam.".txt") ?> </div>
</td></tr>
<tr ><td valign="top" height="10">
<div id="footer">© Silty products<br />  27-03-2009  <font id="ur"></font> </div>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>

Dan maar effe zo ;-)

Groetjes, René

kitty N

31-03-2009 08:40

Hallo René,

Ik heb nu hetzelfde als jou voorbeeld. Dus met die .txt dat werkt ook, alleen ziet dit er hetzelfde uit als gister, waarschijnlijk dacht je gister dat ik iframe gebruikte vanwege de border. Maar dat is niet zo, ik had een border gezet om de div inhoud. Hier even mijn codes:

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?php
$pagina_naam=$_GET['p'];
if (!file_exists($pagina_naam.".txt")) {
    $pagina_naam="bestaat_niet";
}
?>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Silvia Lombarts</title>
<link href="silvia.css" type="text/css" rel="stylesheet">
<?php
include("js.php");
?>
</head>
<body onload="UR_Start()">
<div id="north">
<table height="100%" cellspacing="0" cellpadding="0" border="0" width="100%">
	<tbody>
		<?php
		include("hoofd.php");
		?>
		<tr> <!-- Start Midden stuk -->
			<td valign="top">
				<?php
				include("menu.php");
				?>
				<div id="inhoud" align="center"><?php include($pagina_naam.".txt") ?></div>
			</td>
		</tr> <!-- Einde menu -->
		<?php
		include("footer.php");
		?>
	</tbody>
</table>
</div>
</body>
</html>

Voor ik die include $pagina_naam gebruikte had ik die andere omgezet naar includes.

ccs:

@charset "utf-8";
/* CSS Document */
* { 
margin: 0; 
padding: 0; 
}

html {
height: 100%;width:100%;
overflow:hidden;
}

body {
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
color: black;
height: 100%;
width:100%;
overflow:hidden;
}

#kop {
background-color: #666;
color: white;
text-align:center;
font-family: Georgia, Times, "Times New Roman", serif;
height:70px;
font-size: 19px;
border: 1px solid #333;
}

#navigatie {
float: left;
width: 165px;
height: 100%;
margin-left: 0px;
background-color:#CCCCCC;
border-color:red;
padding-top: 0.5em;
border-right: 1px solid black;
border-left: 1px solid black;
}

#inhoud {
float:left;
margin: 0 0 0 0px;
text-align:center;
font-size:13px;
height: 100%;
padding: 0.1em;
overflow:hidden;
position: static;
border: 1px solid #333;
}

#footer {
float:bottom;
background-color: #ccc;
text-align:center;
font-size:11px;
padding-bottom: 1em;
border: 1px solid #333;
padding-left: 50px;
height:25px;

position: static;
}

.links:link {
color: #000000;
}	

.links:visited {
color: #000000;
}

.links:Hover {
color: #FF0000;
}

.menulines{
font-family: Georgia, Times, "Times New Roman", serif;
border:2.5px solid #F0F0F0;
}

.menulines a{
font-family: Georgia, Times, "Times New Roman", serif;
text-decoration:none;
color:#666666;
}

#menu {
margin-left: 6px;
}

.h1 {
font-size:16px;
}

Wat ik nu bedoel is dat de tekst uitgelijnt moet worden in het midden (de tekst van inhoud). Als je kijkt op http://testsilvia.silty.nl staat de tekst rechts, omdat inhoud niet helemaal doorloopt in de breedte. Misschien met het voorbeeld http://silvia.silty.nl dat het dan wat duidelijker wordt. Zoals je kan zien op die pagina wordt alles nog niet uitgerekt en is dat gemaakt op een 15 inch scherm.

silvia.silty.nl pakt hij alleen nog niet goed in ie..maar die pagina gaat zowiezo weg moet vervangen worden door testsilvia

Reageren

Inloggen om te reageren