Archief - xHTML/CSS: Verschillende vragen over Divs

knuppel · 7 jan 2006

Hallo,

Even ter sugestie " prefix vak laad niet in IE "

Naar aanleiding van C//LiMBa

Ben ik dus eens meer gaan leren over het gebruik van div's en css
Hij had mij ook opgewezen dat mijn code op niets trok.

Na wat opzoekingswerk ben ik tot het volgende resultaat al gekomen.

http://www.2g-desi9n.be/Sint-Donatus/infobronnen.htm

Ik hoop C//LiMBa dat de code deze keer beter is,

Nu zit ik met paar vraagjes.

Vraag 1: Menu Infobronnen

- Kan ik ervoor zorgen dat die grijze kaders voor de tekst komen ?
- Welk doe ik verkeerd dat de mouseover niet werkt ?

Vraag 2: Ik wil het om in tabbellen uit te leggen dat waar het adres in staat zich aanpast met de tekst en altijd vanonder komt hoe doe ik dit met div's ?

bij tabellen , zet je u adres in een cel en je tekst in de andere door er in de ene cel meer tekst staat wordt de andere ook groter en je doet dit dan met
vertical-alingement: botom;
(dit lukt me echter ook niet bij de div's)

Vraag 3: mijn kadergroot wordt maar niet weergegeven?

Vraag 4: In Firefox doet men adresbox het goed, maar in IE gaat hij 1 px over de menubalk staan

javascript file:

PHP:

/* JS: Java Script */
/* Opgemaakt door 2G-desi9n */
/* Website: www.sintdonatus.net */

function toon(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

Css File

PHP:

/* CSS: Cascade Style Sheet */
/* Opgemaakt door 2G-desi9n */
/* Website: www.sintdonatus.net */

#site {
	position: relative;
	width: 740px;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	}
	

/* Begin Logo */

#logo {
	text-decoration: none;
	}

#logo img {
	border: 0px;
	}

/* Einde Logo */

/* Begin Naam */

#naam {
	position: absolute;
	top: 28px;
	left: 115px;
	font-family: Trebuchet MS;
	color: #397E01;
	font-size: 36px;
	}
	
/* Einde Naam */

/* Begin Menu */

#menu {
	position: absolute;
	top: 5px;
	}

/* Einde Menu */



/* Begin Menubalk 1 */

#menubalk1 {
	position: absolute;
	top: 64px;
	left: 0px;
	width: 177px;
	height: 24px;
	background-color: #transparant;
	}
	
/* Einde Menubalk 1 */


/* Begin Kader Klein */

#kaderklein {
	position: absolute;
	width: 21px;
	height: 24px;
	top: 0px;
	left: 0px;
	background-color: #C403A2;
	}

/* Einde Kader Klein */


* Begin Kader Groot */   (nog nakijken !!!!!!!!!!!!!!!!)

#kadergroot {
	position: absolute;
	left: 21px;
	top: 0px;
	width: 135px;
	height: 24px;
	background-color: #D5D5D5;
	}

/* Einde Kader Klein */


/* Begin Snel Menu */

#snelmenu {
	position: absolute;
	left: 21px;
	top: 13px;
	margin: 0px;
	padding: 0px;
    background-color: #D5D5D5; 
    font-size: 0px;  
	}

#snelmenu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: 0px;
    }
    
#snelmenu li {
    display: inline;
    margin: 3px;
  	}

#snelmenu img {
    border: 0px;
	}

/* Einde Snel Menu */



/* Begin Menubalk 2 */

#menubalk2 {
	position: absolute;
	top: 64px;
	left: 177px;
	width: 563px;
	height: 24px;
	background-color: #C403A2;
	}
	
/* Einde Menubalk 2 */

/* Begin Titel Menu */

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#titelmenu {	
	align: right;
	}
	
#titelmenu dl{
	position: absolute;
	left: 453px;
	width: 110px;
	}
	
#titelmenu dt {	
	font-family: Trebuchet MS;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: normal;
	text-transform: uppercase;
	cursor: pointer;
	text-align: right;
	background-color: #C403A2;
	border: none ;
}
#titelmenu dd {
	display: none;
	border: none;

}


#titelmenu li {
	text-align: right;
	background-color: #D5D5D5;
	}
	
#titelmenu li a, #menu dt a {
	text-decoration: none;
	color: #C403A2;
	display: block;
	height: 100%;
	border: 0 none;
	margin: 2px;
}
#titelmenu li a:hover, #menu dt a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
/* Einde Titel Menu */

/* Begin Content */

#content {
	position: relative;

	}

/* Einde Content */


/* Begin Adresbox */

#adresbox {
	position: absolute;
	top: 24px;
	left: 0px;
	width: 156px;
	margin: 0;
	padding: 0;
	background: #D5D5D5;	
	
	}

/* Einde Adresbox */



/* Begin Adres */

.adres {
	vertical-align: bottom;		(NOG NAZIEN !!!!!!!!!!!!!!)
	
	}
	
	
	
	
#adres p{
	margin: 2px;
	font-family: Trebuchet MS;
	color: #000000;
	font-size: 10px;	
	font-weight: normal;
	text-decoration: none;

	}

/* Einde Adres */


/* Begin Tekst */

#tekst {
	position: absolute;
	top: 24px;
	left: 180px;
	width: 500px;
	background-color: transparent;
	
	}
	
/* Einde Tekst */

Heb men uiterste best deze keer gedaan om het allemaal overzichtelijk te houden.

Mvg Geert

knuppel · 8 jan 2006

niemand een antwoord op een van die vragen

denk · 8 jan 2006

k, vraag 4 kan ik wel helpen, heb dit nog ergens gezegd:
je gebruik css, dus het is mogelijk, doe dit:
css:
#id(van uw adresbox) [id]{
position:absolute;
top: aantal px zodat uw adresbox goed staat in FF;
left: aantal px zodat uw adresbox goed staat in FF;
}

#id(van uw adresbox){
position:absolute;
top: aantal px zodat uw adresbox goed staat in IE;
left: aantal px zodat uw adresbox goed staat in IE;
}

Even uitleggen:
#id { } wordt gelezen door IE (ook door FF)
#id [id] { } wordt gelezen door FF en NIET IE (de code die hier instaat OVERSCHRIJFT die van #id { })

Snappie?

Vraag 3: Kadergroot? (misschien een foutje in HTML code?)

Vraag2:
#id (van uw adresbox) {
height:auto;
width:auto;
position:absolute;
top:100%
left:0%
}

NIET zeker van het antwoord dat ik hier heb gegeven, probeer eens zou ik zo zegge

Vraag1:
De hovers werken beiden in IE en FF, dus je doet niets fout

Eum, hoe krijg je die kadertjes erover,... Ik ken niets van scripting, maar misschien heeft het iets te maken met z-index
vb:
#idtekst{
z-index=1;
}
#idgrijzekaders{
z-index=2;
}

Dit zou normaal gezien moeten werken. Het grootste getal ligt altijd vanboven!!!

tikketim · 9 jan 2006

vraag 1 :
- dat van door met een z-index te werken ( zoek maar ff in google )
- die mouseover wegdoen en met css :hover gebruiken zoals bij een link , IE gaat dat wel niet tof vinden maar dat kan je oplossen door met een behavior te werken ( ook gemakkelijk te vinden via google )

knuppel · 9 jan 2006

lukt dit ook bij lijsten ? want ik heb dat toegepast die z-index , maar die werkt niet ? tekst blijft zichtbaar boven men dropdownbox

knuppel · 9 jan 2006

In Firefox werkt het nu, in IE niet

knuppel · 9 jan 2006

En hoe komt dat men adresbox 24 px in IE verschilt met de 24 px in Firefox

IE 25 px css = 24 px werkelijkheid
FF 24 px css = 24 px werkelijkheid

dat zou toch niet mogen ?

denk · 10 jan 2006

knuppel zei:
En hoe komt dat men adresbox 24 px in IE verschilt met de 24 px in Firefox

IE 25 px css = 24 px werkelijkheid
FF 24 px css = 24 px werkelijkheid

dat zou toch niet mogen ?

nja, het zijn 2 verschillende browsers, die anders gemaakt zijn, dus er zullen altijd verschillen zijn. (de oplossing heb je nu wss wel al, anders zie vorige post vraag 4

)

z-index, hmmmmm, gebeurd zo vaak dat dit niet lukt. (geen antwoord, sry

)
met lijsten: zou kunnen, geen idee, zou niet weten hoe (sry

)

tikketim · 10 jan 2006

inderdaad die z-index werkt weer niet in IE , heb er achter aan het zoeken geweest maar ik vind het ook niet

knuppel · 10 jan 2006

en dat van vraag 4 dat antwoord dat je me hebt gegeven

#adresbox [adresbox]{
position:absolute;
top: 25px;
left: 21px;
}

werkt ook niet

knuppel · 10 jan 2006

http://www.2g-desi9n.be/Sint-Donatus/infobronnen.htm

Bij een andere pagina (bijvoorbeeld aanbod) gaat de paarse balken blauw moeten worden, hoe doe ik dit in css ? een nieuwe div id="balkblauw" en in men css #balkblauw en alles overnemen van de roze enkel de background-color anders ? of is er iets dat hij ziet dat dat balk b is dus andere kleur ?

Ik heb al gezien dat dit moet lukken, maar vind niet direct terug hoe ik dit moet intyppen in google om zo een resultaat te vinden.

Obliv` · 11 jan 2006

knuppel zei:
http://www.2g-desi9n.be/Sint-Donatus/infobronnen.htm

Bij een andere pagina (bijvoorbeeld aanbod) gaat de paarse balken blauw moeten worden, hoe doe ik dit in css ? een nieuwe div id="balkblauw" en in men css #balkblauw en alles overnemen van de roze enkel de background-color anders ? of is er iets dat hij ziet dat dat balk b is dus andere kleur ?

Ik heb al gezien dat dit moet lukken, maar vind niet direct terug hoe ik dit moet intyppen in google om zo een resultaat te vinden.

Code:

div#balkblauw, div#balkpaars
{
   display: block;
   width: 500px;
   height: 30px;
}

div#balkblauw
{
   background-color: #blauw;
}

div#balkpaars
{
   background-color: #paars;
}

dit is één van de mogelijkheden

//edit
herlees (en herschrijf) de eerste paragraaf van je post eens (die hier juist boven), want ik heb hem toch 3x moeten lezen voor ik ongeveer door had wat je allemaal bedoelde

voorbeeldzin: of is er iets dat hij ziet dat dat balk b is dus andere kleur ?

knuppel · 17 jan 2006

Hallo,

@Denk, er is nog steeds niets veranderd.

http://www.2g-desi9n.be/Sint-Donatus/infobronnen.htm

CSS: van adresbox

PHP:

/* Begin Adresbox Firefox */ 

#adresbox [adresbox] { 
    position: absolute; 
    top: 24px;
    } 

/* Einde Adresbox Firefox*/ 


/* Begin Adresbox IE */ 

#adresbox { 
    position: absolute; 
    top: 25px; 
    left: 0px; 
    width: 156px; 
    height: 450px;
    margin: 0; 
    padding: 0; 
    background: #D5D5D5;     
     
    } 

/* Einde Adresbox IE */

Mvg Geert

Archief - xHTML/CSS: Verschillende vragen over Divs

knuppel

Legacy Member

knuppel

Legacy Member

denk

Legacy Member

tikketim

Legacy Member

knuppel

Legacy Member

knuppel

Legacy Member

knuppel

Legacy Member

denk

Legacy Member

tikketim

Legacy Member

knuppel

Legacy Member

knuppel

Legacy Member

Obliv`

Legacy Member

knuppel

Legacy Member