Archief - HTML/CSS: Paar problemen (eerste keer css/html)

ozl · 16 mrt 2008

Hey,

Ik nu voor de eerste keer een template in html gezet door gebruik te maken van css en html ipv de tabellen zoals je ze krijgt als je via photoshop 'Save for web and devices' doet. Ik heb echter nog wat problemen:

- Linksonder zou de achtergrond wit moeten zijn (zie screen)
- Ik heb een footer (http://www.dive-gaming.be/test/images/footer.jpg) die onderaan moet herhaald worden over de hele pagina
- En nog wat compatibiliteitsproblemen in IE (veel eigenlijk):
- banner sluit niet aan met het menu
- content box is 1px te smal
- png image met transparante bg heeft niet het gewenste resultaat (cs img rechts)

Zo zou het er moeten uitzien: klik

Dit is mijn html-code:

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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/dive.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

  <div id="container_links">
   	  <div id="image_left"><img src="images/dive_14.jpg" width="322" height="416" /></div>
  </div>

  <div id="container_midden">
    <!--HEADER-->
	
	<div id="header"><img src="images/dive_02.jpg" /></div>
    
            <!--MENU-->

	<div id="menu"><img src="images/dive_06.jpg" /><img src="images/dive_07.jpg" width="62" height="97" /><img src="images/dive_08.jpg" width="69" height="97" /><img src="images/dive_09.jpg" width="74" height="97" /><img src="images/dive_10.jpg" width="79" height="97" /><img src="images/dive_11.jpg" width="71" height="97" /><img src="images/dive_12.jpg" width="72" height="97" /><img src="images/dive_13.jpg" width="89" height="97" />
    </div>
    
            <!--CONTENT-->

	<div id="banner"><img src="images/dive_15.jpg" /></div>
    <div id="content"><img src="images/dive_18.jpg" /></div>
    <div id="content_tekst"></div>
    
  </div>
  
            <!--LOGIN+VELDEN-->
  
  <div id="container_rechts">
  
    <div id="logo"><img src="images/dive_03.jpg" width="216" height="136" /></div>
    <div id="login"><img src="images/dive_16.jpg" /></div>
    <div id="login_veld"></div>
    <div id="grijsvak"></div>
    <div id="latest_news"><img src="images/dive_23.jpg" /></div>
    <div id="witvak"></div>
    <div id="sponsors"><img src="images/dive_25.jpg" /></div>
    <div id="witvak"></div>
    
  </div>
  
  <div id="container_rechts_bg1">

 	<div id="rechts_csimg"></div>
  
  </div>

  </div>

</body>

</html>

Kheb dus met 1 container rondom gewerkt en dan 4 naast elkaar in die grote. Kweet niet of dat de ideale manier is, tips welkom.

css sheet

Code:

@charset "utf-8";
/* CSS Document */

body{
	margin-top:0px;
	margin-right:0px;
	margin-left:0px;
	background-image:url(../images/bg_right.jpg);
}

#container {
	width:100%;
	margin-left:0px;
	margin-right:0px;
}

#container_midden {
	width:594px;
	float:left;
}

#container_links {
	margin-left:0px;
	width:322px;
	background-color:#FFFFFF;
	float:left;
}

#container_rechts {
	width:216px;
	float:left;
}

#container_rechts_bg1 {
	background-image:url(../images/bg_right.jpg);
	background-repeat:repeat;
	float:left;	
}

#rechts_csimg {
	background-image:url(../images/csimg.png);
	background-repeat:no-repeat;
	margin-top:70px;
	width:180px;
	height:300px;
}

#header {
	width:594px;
}

#menu {
	width:594px;
}

#banner {
	width:594px;
}

#content {
	width:594px;
	border-right:1px solid #CFCDCD;
}

#content_tekst {
	background-color:#F1F0F0;
	height:512px;
	border-left:1px solid #CFCDCD;
	border-right:1px solid #CFCDCD;
}

#image_left {
	margin-top:39px;
}

#login_veld {
	background-image:url(../images/dive_17.jpg);
	height:178px;
}

#grijsvak {
	background-color:#EAE8E9;
	height:155px;
}

#witvak {
	background-color:#FFFFFF;
	height:155px;
}

#footer {
	background-image:url(../images/footer.jpg);
	background-repeat:repeat-x;
	height:17px;
}

Dan nog een vraag, bij header/menu/banner heb ik een div maar die doet eigenlijk niks, ik zal die maar best weglaten en gewoon de afbeelding plaatsen?

Die grijze achtergrond rechts zou ik gewoon rechts willen laten doorlopen, in de div container_rechts_bg1 maar dat lukt me niet, nu is het een bg over de hele pagina maar dat is ook niet ideaal want dan zie je hem links.

Alvast bedankt!

EDIT: Ik zie dat er nog andere problemen zijn bij kleinere resoluties. Ik had deze niet, maar de twee rechtse containers komen onder de andere, het zou dus gwn naast elkaar moeten komen. Misschien moet ik mijn aanpak toch veranderen?

ozl · 22 mrt 2008

niemand?

het.pc.schaap · 7 apr 2008

ipv telkens in een div de <img> tag te gebruiken zou ik gewoon in uwe css zetten:
background-imag:url("afbeelding.gif"
of simpeler: background:url("afbeelding.gif")
dat is al een lichter html document direct

container: width:99% is 99% in Ff maar 100% in IE, IE heeft de ambetante gewoonte om bij width;100% al direct onderaan een baar weer te geven en uwen opmaak te verneuken

margin-top:0px WTF? dat mag gewoon weg, dit is wat em standaard gaat doen, dus niet nog eens vermelden, haalt niets uit
ahjah, en geef mischien ook de waarden van 'height' op, want ik zie overal width dtaan, maar nergens heigth

Archief - HTML/CSS: Paar problemen (eerste keer css/html)

ozl

Legacy Member

ozl

Legacy Member

het.pc.schaap

Legacy Member