float div en mouse-over

Door roy marijnissen op 03-02-2009 20:52

1.037 views

Ik heb onderstaande css/html code. Werkt tot nu toe goed. Alleen ik moet er nog een floating div over hebben en een mouse-over. Dit is uitgelegd in het plaatje. Ik heb al veel gezocht maar niks gevonden. Weet iemand hoe ik deze twee problemen oplos ??


<style type="text/css">
<!--
#container {
	width:295px;
	height:165px;
	background-color:#fffed2;
	border:1px dashed;
}
#title {
	width:285px;
	height:20px;
	float:left;
	margin:5px;
}
#photo {
	width:100px;
	height:100px;
	float:left;
	margin:5px;
	background-color:#CC0000;
}
#text {
	width:175px;
	height:120px;
	float:left;
	margin:5px;
}
-->
</style></head>

<body>
<div id="container">

  <div id="title">Crosstrainer YH-JH87620 "Condor"</div>
    <div id="photo"></div>
    <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales metus vitae erat. Nam lacus metus, venenatis accumsan, blandit vel, porta id, sapien. </div>

</div>
</body>

http://foto-hosting.nl/img=9d3de7cd5c

Gerritjan

03-02-2009 20:56


#je_id:hover{
  color:jekleur;
}
#je_id{
  float:positie;
}

Niek Weevers

03-02-2009 21:02

Zet je hele product met foto, titel en uitleg in een vak. Bijv <div class="product"></div>
Zet de titel in een h1 of h2 (veel beter voor zoekmachines en semantisch correcter) en geef deze geen hoogte of breedte.
Geef de tekst div geen vaste hoogte.

Opbouw code


<div class="product">
<h2>Titel product</h2>
<div class="afbeelding">
<img src="foto.jpg" width="" height="" alt="" />
<span class="sticker"></span>
</div>
<div class="info"></div>
</div>

de .sticker geef je position: block; of je maakt er een div van.
Deze geef je een position: relative; en positioneer deze met left en top

roy marijnissen

03-02-2009 21:17

@Gerritjan:

Snap even niet precies wat je bedoeld. Heb een beetje geprobeerd met onderstaande maar dat klopt niet echt :


#container:hover {
	background-color:#fffed2;
}	
#container {
	width:295px;
	height:165px;
	float:inherit;
	border:1px dashed;
}

@Niek: Sorry maar krijg echt niet voor elkaar, of snap niet wat je bedoeld. Zoals ik in de openingspost de code heb klopt alles, alleen die sitcker gaat er niet overheen. Dus hoe los ik dat op ? Want als ik jou code gebruik krijg ik een hele andere output.

Niek Weevers

03-02-2009 21:23

Ik geef je een tip hoe je het beste het kan opbouwen. En van daaruit verder gaan.
In jouw voorbeeld zie ik de sticker niet. Kun je geen online voorbeeld anders geven, dit is voor ons een stuk makkelijker

roy marijnissen

03-02-2009 21:33

Een voorbeeld met de sticker heb ik nog niet omdat ik nog niet weet hoe dit te realiseren, ik had het idee met een floating div ofzo. Hieronder wel een voorbeeld van de site zonder de sticker en achtergrond verandering :

http://www.maxi-hosting.nl/dump/prijs.html

Niek Weevers

03-02-2009 21:43

Ik heb de volgende code voor je gemaakt. Ik zou het zo doen.
De .foto en .sticker kun je dus nog vervangen voor de afbeeldingen


<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
	width:285px;
	background-color:#fffed2;
	border:1px dashed;
	overflow:hidden;
	padding: 0 5px 5px 5px;
}
h2 {
	margin:5px;
	font-size:1em;
}
#photo {
	width:100px;
	float:left;
	position: relative;
}
#photo .foto {
	width: 100px;
	height: 100px;
	display: block;
	background:#C00;
}
#photo .sticker {
	width: 50px;
	height: 50px;
	display: block;
	background: #390;
	position: absolute;
	top: 60px;
	left: 60px;
}
#text {
	width:175px;
	float:right;
}
-->
</style></head>

<body>
<div id="container">

  <h2>Crosstrainer YH-JH87620 "Condor"</h2>
  <div id="photo">
  	<span class="foto"></span>
    <span class="sticker"></span>
  </div>
    <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales metus vitae erat. Nam lacus metus, venenatis accumsan, blandit vel, porta id, sapien. </div>
</div>
</body>
</html>

roy marijnissen

03-02-2009 21:48

A zo, very nice ! Precies zoals ik het wilde idd, alleen dan toch iets anders qua code haha. Super bedankt ! Enige kleine dingetje is nu nog dat de achtergrondkleur standaard wit moet zijn en dan deze gelige kleur krijgen bij een mouseover van de container div.

Niek Weevers

03-02-2009 22:25

#container {
background; #FFF;
}

#container:hover {
background: #fffed2;
}

Dit zal alleen niet in ie6 werken. Daar heb je verschillende oplossingen voor. Maar je kan er ook voor kiezen om het in ie6 bij een hover maar wit te laten, het is namelijk niet iets wat belangrijk of nodig is.

roy marijnissen

03-02-2009 22:42

A kijk super ! Alles opgelost nu. Super bedankt !!

Reageren

Inloggen om te reageren