PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

CSS hulp MacGames.be

Door Hipska BE op 08-11-2006 21:43
947 views
hoi voor mijn site www.macgames.be ben ik bezig met de layout in CSS aan het steken ipv tabellen om de simpele redenen dat het dan sneller en overzichtelijker is. Iedereen raadt het aan om CSS te gebruiken dus ik dacht laat het ook maar eens proberen.

Nu kom ik op een paar probleempjes;

Ik wil dus een kolom met inhoud (main) en een kolom rechts ervan met extra's (sidebar), momenteel lukt het mij om dit te realiseren, maar natuurlijk wil IE niet mee! Die toont de tekst van main maar pas onder te tekst van de sidebar heb ik mij laten vertellen.

Hier zie je het script in actie.
Hier wat relevante code
#content {
	border: 3px solid #9d0000;
	background: #cccccc;
	color: black;
}

#sidebar {
	width: 200px;
	border: 1px solid purple;
	float: right;
}

#main {
	border: 1px solid green;
	float: none;
	margin-right: 204px;
}

#end {
	clear: both;
}
K
Kalle P
08-11-2006 22:22
Ik zie totaal geen verschil in ff of ie.
Alleen dat links wat uitlijning mist in IE.
Hipska BE
08-11-2006 22:25
Welke versie van IE spreek jij over? het moet werken op de IE van windows XP en op IE7 zou het vanzelf werken volgens de developpers.
K
Kalle P
08-11-2006 22:33
Idd IE7 alleen die uitlijning.

IE 6 zie ik nu.

Maak er eens eens een float: left van.

Die content kan je weg halen, tenzij je het doet voor de border.

Je hebt trouwens 2 divs met het id item-open, dat kan niet. Een id is uniek, gebruik dan een class.



Hipska BE
08-11-2006 22:43
de content is idd voor de grijze achtergrond, de rode rand en later ook voor tekstopmaak.

ehm, als ik float left maak, gaat de sidebar dan niet links staan?

en de item-open en item-closed ga ik meteen een class van maken.
K
Kalle P
08-11-2006 22:45
ik bedoelde float:left maken bij main
Hipska BE
08-11-2006 22:54
had ik al geprobeerd, maar dan gaat hij niet meer tot tegen de rand van de sidebar.

de breedte is dan maar tot aan het einde van de tekst.
Jan Koehoorn
08-11-2006 22:59
Probeer eens zo:

CSS

BODY {
	MARGIN: 0px;
	BACKGROUND-COLOR: #000000
}
#container {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	PADDING-BOTTOM: 10px;
	MARGIN: auto;
	WIDTH: 98%;
	COLOR: white;
	PADDING-TOP: 10px;
	min-width: 960px
}
#header {
	BORDER-RIGHT: #9d0000 3px solid;
	BORDER-TOP: #9d0000 3px solid;
	MARGIN-BOTTOM: 10px;
	OVERFLOW: hidden;
	BORDER-LEFT: #9d0000 3px solid;
	BORDER-BOTTOM: #9d0000 3px solid;
	HEIGHT: 150px
}
#logo {
	BACKGROUND: url(images/top_bkg.jpg) repeat-x;
	OVERFLOW: hidden;
	HEIGHT: 110px;
	TEXT-ALIGN: left
}
#banner {
	RIGHT: 3%;
	OVERFLOW: hidden;
	WIDTH: 460px;
	POSITION: absolute;
	TOP: 41px;
	HEIGHT: 57px
}
#menu {
	PADDING-RIGHT: 5px;
	PADDING-LEFT: 5px;
	PADDING-BOTTOM: 0px;
	VERTICAL-ALIGN: middle;
	OVERFLOW: hidden;
	PADDING-TOP: 10px;
	HEIGHT: 33px;
	TEXT-ALIGN: center
}
#menu-extra {
	RIGHT: 10px;
	FLOAT: right;
	WIDTH: 20%;
	POSITION: relative;
	TOP: -33px;
	TEXT-ALIGN: center
}
#content {
	BORDER-RIGHT: #9d0000 3px solid;
	BORDER-TOP: #9d0000 3px solid;
	BACKGROUND: #cc0;
	BORDER-LEFT: #9d0000 3px solid;
	COLOR: black;
	BORDER-BOTTOM: #9d0000 3px solid
	vertical-align: top;
}
#sidebar {
	BORDER-RIGHT: purple 1px solid;
	BORDER-TOP: purple 1px solid;
	FLOAT: right;
	BORDER-LEFT: purple 1px solid;
	WIDTH: 200px;
	BORDER-BOTTOM: purple 1px solid
}
#main {
	BORDER-RIGHT: green 1px solid;
	BORDER-TOP: green 1px solid;
	BORDER-LEFT: green 1px solid;
	padding-RIGHT: 0px;
	BORDER-BOTTOM: green 1px solid
}
#end {
	CLEAR: both
}
.item-open {

}
A:hover {
	COLOR: #aa0000;
	TEXT-DECORATION: underline
}
A {
	COLOR: #aa0000;
	TEXT-DECORATION: none
}


HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0024)http://test.macgames.be/ -->
<HTML 
xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>MacGames.be: Home</TITLE>
<META http-equiv=content-type content=text/html;charset=utf-8>
<LINK 
href="MacGames_be Home_bestanden/stylesheet.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR>
</HEAD>
<BODY> 
<DIV id=container> 
	<DIV id=header> 
		<DIV id=logo> 
			<!--  Hier het logo van je site  //--> 
			<A title="Start pagina" 
href="http://test.macgames.be/index.php"><IMG height=110 alt=MacGames.be 
src="MacGames_be Home_bestanden/logo.jpg" width=504 border=0></A> </DIV> 
		<DIV id=banner> 
			<!--  Hier reclame banners //--> 
			<IMG title=MacMini height=57 
src="MacGames_be Home_bestanden/mac_mini.gif" width=460> </DIV> 
		<DIV id=menu> 
			<!--  Hier de menu-links  //--> 
			<A title="De Start Pagina" 
href="http://macgames.be/"><IMG height=22 alt="" 
src="MacGames_be Home_bestanden/start.jpg" width=118 border=0></A> <A 
title="Laatste nieuws" href="http://test.macgames.be/forum/viewforum.php?f=3" 
target=_parent><IMG height=22 alt="" src="MacGames_be Home_bestanden/nieuws.jpg" 
width=118 border=0></A> <A title="De Documenten" 
href="http://test.macgames.be/forum/viewforum.php?f=4" target=_parent><IMG 
height=22 alt="" src="MacGames_be Home_bestanden/documenten.jpg" width=118 
border=0></A> <A href="http://test.macgames.be/forum/" target=_parent><IMG 
height=22 alt="" src="MacGames_be Home_bestanden/forum.jpg" width=118 
border=0></A> </DIV> 
		<DIV id=menu-extra> 
			<!--  Hier iets extra  //--> 
			<A href="http://old.macgames.be/" 
target=_blank>Ga naar het oude forum</A> </DIV> 
	</DIV> 
	<DIV id=content> 
		<DIV id=main> 
			<DIV id=sidebar>Sidebar content<BR> 
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra condimentum dolor. Pellentesque luctus augue id massa. Donec mattis tellus venenatis nisl. Mauris ut lorem a lorem tempor blandit. Nam imperdiet, orci sed venenatis mollis, arcu nisl dignissim purus, ut tempus dui eros a quam. Phasellus egestas. Mauris vel felis. Aliquam diam. Mauris laoreet. Vivamus condimentum elit id turpis. Praesent ut orci nec orci accumsan pharetra. Praesent eget arcu nec est sagittis fringilla. Aenean vitae tortor. Fusce dapibus sollicitudin dui. Maecenas augue dolor, posuere sed, facilisis at, ornare vitae, leo. Sed pharetra lacus nec nunc. Nullam sit amet libero. Sed cursus sagittis libero. Fusce libero. </DIV> 
			<DIV class=item-open>Main content 1 </DIV> 
			<DIV class=item-open>Main content 2 </DIV> 
			<DIV id=item-closed></DIV> 
		</DIV> 
		<DIV id=end></DIV> 
	</DIV> 
</DIV> 
</BODY>
</HTML>
Hipska BE
08-11-2006 23:23
Hmm, dit doet het ook niet echt goed hoor.

het zou moeten lijken als bij www.macgames.be

[edit]In de sidebar moeten ook item-open en item-closed kunnen zitten, dus jou optie werkt ms in IE maar doet nog niet wat ik wil met de site.[/edit]
Jan Koehoorn
08-11-2006 23:35
Het ziet er bij mij anders hetzelfde uit nu, in IE en FF.
Hipska BE
08-11-2006 23:56
op welke pagina kijk je nu dan? en met welke versie?

Reageren

Inloggen om te reageren