html css probleem

xar · 5 okt 2008

beste helpmij'ers

ik hoop dat ik mijn probleem op de juiste plek neer zet aangezien er geen speciaal css forum is en html en css met elkaar verbonden zijn..

mijn probleem is t volgende:

mijn text loopt dwars door mijn opmaak heen..
oftewel m'n opmaak volg niet mijn tekst..

website:
--verwijderderd door mij--

en dan gewoon naar beneden scrollen..

mijn css opmaakr voor het midden stuk is:

Code:

#content{
border: solid 1px #ff6600;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
top: 32.5%;
color:#ff6600;
text-align:center;
font-family: Lucida Console;

}

de tekst die er staat word uit een ander bestand gehaald via php met de volgende code:

PHP:

<?php include($pagina); ?>

de website is XHTML 1.0 Strict
en het css bestand is CSS versie 2.1

het beste is om de pagina via firefox te bekijken..
IE heeft er om een of andere manier moeite mee..

maarten1988 · 5 okt 2008

Als je dit van je ccs maakt zou het niet meer fout moeten gaan je krijgt wel een scrollbalk...

HTML:

#content{
border: solid 1px #ff6600;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
top: 32.5%;
color:#ff6600;
text-align:center;
font-family: Lucida Console;
overflow:auto;
}

Voor meer over overflow check w3school http://www.w3schools.com/Css/pr_pos_overflow.asp

peter vazed · 5 okt 2008

Bekijk je broncode eens.

Je hebt een gewone pagina geinclud
je moet -van deze pagina- de head en andere dingen eruit halen.

Voorts werk je met %
dus van het beelscherm.
Niet van het teksvlak.
Je zult een div een vaste waarde moeten geven.

Haal na correctie je pagina door de validator:
http://validator.w3.org/

xar · 6 okt 2008

@maarten...

dankjewel voor deze oplossing.. het werkt.. aleen vind ik het er niet echt netjes uitzien..
maar dat is mijn mening..

@peter vazed

ik snap je oplossing niet..
zodra ik een van m'n divs een vaste waarde ga geven loopt hij niet meer goed met de opmaak.. en ik snap nog steeds niet hoe ik door hem een vaste waarde te geven de pagina even ver door laat lopen als de tekst..

peter vazed · 6 okt 2008

Is dit beter?

HTML:

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>
			Home
		</title>
<style type="text/css">
body{
background-color:black;
margin:0;
padding: 0;
}

#banner{
left: 20%;
height: 15%;
position: absolute;
font-family: Lucida Console;
text-align:center;
}

#menu{
height: 5%;
position: absolute;
left: 0%;
right:0%;
top: 22.5%;
font-family: Lucida Console;

}

.menukopje{
background-color: black;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
width: 13%;
float: left;
border: solid 1px #ff6600;
color:#ff6600;
font-family: Lucida Console;
}

.menukopje:hover{
background-color: #ff6600;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
width: 13%;
float: left;
border: solid 1px #ff6600;
color:black;
font-family: Lucida Console;
}

.linksbalk{
border: solid 1px#ff6600;
position: absolute;
left: 2.5%;
right: 82.5%;
top: 25%;
color:#ff6600;
font-size: 7pt; 
text-align:center;
font-family: Lucida Console;
}

.rechtsbalk{
border: solid 1px#ff6600;
position: absolute;
left: 82.5%;
right: 2.5%;
top: 25%;
color:#ff6600;
font-size: 7pt; 
text-align:center;
font-family: Lucida Console;

}

#content{
border: solid 1px #ff6600;

position: absolute;
left: 20%;
right: 20%;
top: 32.5%;
color:#ff6600;
text-align:center;
font-family: Lucida Console;

}

#links{
border: solid 1px #ff6600;
height: 100%;
position: absolute;
left: 2.5%;
right: 82.5%;
top: 32.5%;
color:#ff6600;font-family: Lucida Console;

}

#rechts{
border: solid 1px#ff6600;
height: 100%;
position: absolute;
left: 82.5%;
right: 2.5%;
top: 32.5%;
color:#ff6600;
font-family: Lucida Console;
}

a {
color:#ff6600;
text-decoration: none;
}
a:hover
 {
color: black;
text-decoration: none;
}



</style>
	</head>
	<body>
		<div id="banner">
		</div>
		<div id="menu">
			<div class="linksbalk">
				" "
			</div>
			
			<div class="menukopje" style="position: absolute; left: 22.5%;">
				<a href="index.php?id=1"> Home</a>
			</div>
			<div class="menukopje" style="position: absolute; left: 37.5%;">
				 
				<a href="index.php?id=2">Over mijzelf</a>
			</div>
			<div class="menukopje" style="position: absolute; left: 52.5%;">
				 
				<a href="index.php?id=3">Portefolio</a>
			</div>
			<div class="menukopje" style="position: absolute; left: 67.5%;">
				<a href="index.php?id=4">Login</a>
			</div>
			<div class="rechtsbalk">
				Copyright &copy;  
			</div>
		</div>
		<div id="content">
			<!-- include pagina begint hier -->
			<h3>
				V1.0.2 chatscript.
			</h3>
			<h1>
				//--------------------\\
			</h1>
			YAY chatscript gevonden
			<br/>
			was in eerste instantie niet strict dus heb hem moeten editen.. et php bestand
			is niet zelf geschreven
			<br/>
			bron : http://www.phphulp.nl/php/scripts/1/343/ 
			<br/>
			
			en ja ik weet dat de chat niet zo heel veilig is..
			<br/>
			<br/>
			<h1>
				\\--------------------//
			</h1>
			<h3>
				V1.0.1 chatbox verwijderd.
			</h3>
			<h1>
				//--------------------\\
			</h1>
			de link naar de chatbox was niet strict..
			<br/>
			je kan hem nog wel berijken via de volgende link maar ik kan hem niet in de
			website zelf zetten vanwege de regels van school
			<br/>
			link:http://www.freeshoutbox.net/hushout
			<br/>
			zodra ik een vijlig scypt in voor een chatbox kan vinden dat ik snap of ik heb
			de knowhow hoe ik hem zelf kan schrijven komt er een nieuwe
			<br/>
			
			<br/>
			<h1>
				\\--------------------//
			</h1>
			<h3>
				V1.0 Major site revamp.
			</h3>
			<h1>
				//--------------------\\
			</h1>
			ik heb de hele site een revamp gegevn..
			<br/>
			reden:
			<br/>
			mijn oude site zag er net iets te onprofesioneel en kinderachtig uit
			<br/>
			deze site voldoet veel beter aan de gestelde eisen en hier heb ik ook meer
			ruimte om dingen toe te voegen
			<br/>
			<h1>
				\\--------------------//
			</h1>
			=============
			<h3>
				V1.0.2 chatscript.
			</h3>
			<h1>
				//--------------------\\
			</h1>
			YAY chatscript gevonden
			<br/>
			was in eerste instantie niet strict dus heb hem moeten editen.. et php bestand
			is niet zelf geschreven
			<br/>
			bron : http://www.phphulp.nl/php/scripts/1/343/ 
			<br/>
			
			en ja ik weet dat de chat niet zo heel veilig is..
			<br/>
			<br/>
			<h1>
				\\--------------------//
			</h1>
			<h3>
				V1.0.1 chatbox verwijderd.
			</h3>
			<h1>
				//--------------------\\
			</h1>
			de link naar de chatbox was niet strict..
			<br/>
			je kan hem nog wel berijken via de volgende link maar ik kan hem niet in de
			website zelf zetten vanwege de regels van school
			<br/>
			link:http://www.freeshoutbox.net/hushout
			<br/>
			zodra ik een vijlig scypt in voor een chatbox kan vinden dat ik snap of ik heb
			de knowhow hoe ik hem zelf kan schrijven komt er een nieuwe
			<br/>
			
			<br/>
			<h1>
				\\--------------------//
			</h1>
			<h3>
				V1.0 Major site revamp.
			</h3>
			<h1>
				//--------------------\\
			</h1>
			ik heb de hele site een revamp gegevn..
			<br/>
			reden:
			<br/>
			mijn oude site zag er net iets te onprofesioneel en kinderachtig uit
			<br/>
			deze site voldoet veel beter aan de gestelde eisen en hier heb ik ook meer
			ruimte om dingen toe te voegen
			<br/>
			<h1>
				\\--------------------//
			</h1>
			
			<!-- einde include pagina -->
	
		</div>
		<div id="links">
		</div>
		<div id="rechts">
			
			<form method="post" action="shout.php">
				<table>
					<tr>
						<td>
							Naam:
						</td>
					</tr>
					<tr>
						<td>
							<input name="name" maxlength="10" type="text"/>
						</td>
					</tr>
					<tr>
						<td>
							Bericht:
						</td>
						
					</tr>
					<tr>
						<td>
							<input name="shout" maxlength="50" type="text"/>
						</td>
					</tr>
				</table>
				<p>
				<input type="submit" value="Shout"/>
				</p>
			</form>
			<div style='overflow:hidden'>
				<b>
					[05-10-2008/19:13:46]
				</b>
				 
				<b>
					<i>
						...:
					</i>
				</b>
				 heeft wel tijd gekost om deze strickt te maken 
			</div>
			<div style='overflow:hidden'>
				<b>
					[05-10-2008/19:13:09]
				</b>
				 
				<b>
					<i>
						...:
					</i>
				</b>
				 wat je alemaal al niet kan vinden op internet
			</div>
			
			<div style='overflow:hidden'>
				<b>
					[05-10-2008/19:12:04]
				</b>
				 
				<b>
					<i>
						...:
					</i>
				</b>
				 XD eertse strict shoutbox
			</div>
			 <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>
		</div>
	
		
	</body>
</html>

xar · 7 okt 2008

ik snap je nogsteeds niet...
als je bedoeld dat ik mijn css in mijn html bestand moet zetten dan zou k graag willen weten in welk opzicht dat handiger is dan in een apart css bestand dat er automatisch in word gezet:

HTML:

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Home</title>
	<link rel="stylesheet" href="css/css.css" type="text/css" />
</head>

verder zie ik de css code geen verschil..
ma aangezien het nu kwart voor 8 's ochtends is kan ik er ook overheen gelezen hebben

peter vazed · 7 okt 2008

Neen.
style staat nu in pagina, anders kan ik het niet testen.

Bedoeling is dat je de code kopieert, en lokaal test.
Dan zie je of het beter aan je wensen voldoet, of niet.

xar · 19 okt 2008

uiteindelijk is t me gelukt.. met een deel dank van jullie alemaal en stagier van de docent..

dus bedankt..

html css probleem

xar

Gebruiker

maarten1988

Gebruiker

peter vazed

Meubilair

xar

Gebruiker

peter vazed

Meubilair

xar

Gebruiker

peter vazed

Meubilair

xar

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy