PHP vraagje; hoover balk te groot.

[Con]

Ik snap er niets van, ik onderhoud een site waarbij de

hooverbalken voor mooi te breed zijn.

 

Ik kom er maar niet achter wat de tricker is, ik heb;

#menu {
	float: right; 
	width: 190px;
	padding: 90px 0px 0px 0px; 
}

#menu a {
	display: block; 
	width:150px; 
	padding:15px 55px 5px 25px; 
	color:#ecf3c0; 
	font-size: 80%; 
	text-decoration:none; 
	text-align: right;

Wat ik er ook aan wijzig de width's of de padding's, ik krijg de balk niet smaller.

[Big fellow]

Kan je de bijbehorende html ook even posten?

[Con]

1 uur geleden zei Big fellow:

Kan je de bijbehorende html ook even posten?

Natuurlijk,

het stukje HTML is;

.....
<div id="container">
<div id="content">
<div id="groenebovenbalk"></div>

<?php
include "menurechts.php";
?>

<div id="logo_links"></div>
.....

De include is;

<div id="menu">
	<a href="https://www.facebook.com/werkbalans.mindfulness">
	<img src="img/facebook01.gif" border="0" alt="Facebook" title="Facebook" /></a>
    <a href="index.php">Home</a>
    <a href="wat_is_mindfulness.php">Wat is mindfulness?</a>
    <a href="training.php">De training</a>
En nog een stel regels

</div>

 

28 november 2018 aangepast door Con

[Big fellow]

Wat is de breedte van "container", "content" en "groenebovenbalk"?

[Psychosammie]

Niet de oplossing van jouw probleem maar wordt het niet eens tijd voor een content management systeem? Wordpress bijvoorbeeld?

[badmeester]

Citaat

Ik snap er niets van, ik onderhoud een site waarbij de

hooverbalken voor mooi te breed zijn.

De #menu a:hover is niet te breed !

De achtergrond afbeelding van #content klopt niet. De groene balk rechts is in de achtergrond afbeelding is ca. 30px te smal.

 

Je kunt het eenvoudig oplossen door een achtergrond kleur aan #menu toe te kennen.

 

Na:

#menu {

Voeg toe:

	background: #5b8903;

 

[badmeester]

Aanvulling:

Door de floating links en rechts kan het gebeuren dat #menu niet dezelfde hoogte heeft als de #tekst.

 

Andere oplossing is aanpassing van de breedte voor #menu en #menu a

#menu {
	float: right; 
	width: 150px;
	padding: 90px 0px 0px 0px; 
}

#menu a {
	display: block; 
	width:120px; 
	padding:15px 55px 5px 25px; 
	color:#ecf3c0; 
	font-size: 80%; 
	text-decoration:none; 
	text-align: right;
}

 

[Con]

13 uur geleden zei Psychosammie:

Niet de oplossing van jouw probleem maar wordt het niet eens tijd voor een content management systeem? Wordpress bijvoorbeeld?

 

De bestaande code koester ik (om bepaalde reden)

en van Wordpress weet ik niets, heb alleen een beetje

ervaring met html, php en css.

56 minuten geleden zei badmeester:

Aanvulling:

Door de floating links en rechts kan het gebeuren dat #menu niet dezelfde hoogte heeft als de #tekst.

 

Andere oplossing is aanpassing van de breedte voor #menu en #menu a

#menu {
	float: right; 
	width: 150px;
	padding: 90px 0px 0px 0px; 
}

#menu a {
	display: block; 
	width:120px; 
	padding:15px 55px 5px 25px; 
	color:#ecf3c0; 
	font-size: 80%; 
	text-decoration:none; 
	text-align: right;
}

 

 

Ja, volgens de html-validator in Firefox werkt dat.

Nu nog even de code echt toepassen, wordt vervolgd.

[Con]

1 uur geleden zei Con:

 

De bestaande code koester ik (om bepaalde reden)

en van Wordpress weet ik niets, heb alleen een beetje

ervaring met html, php en css.

 

Ja, volgens de html-validator in Firefox werkt dat.

Nu nog even de code echt toepassen, wordt vervolgd.

 

Ja, dat was hem, toppie en bedankt.

[Con]

Maar begrijpen doe ik het niet, de code is een niet door mij geschreven code.

Dus enige uitleg kan hier geen kwaad.

 

Hoe moet ik de relatie zien tussen menu en menu a?

Ik had namelijk niet de beleving dat je de 2 padding's

bij elkaar moest optellen.

 

[badmeester]

Div #menu heeft een bepaalde opmaak. Waaronder de breedte en padding.

De hyperlink a valt binnen het kader van #menu en dus binnen de breedte met padding.

Als a vervolgens ook een bepaalde breedte en padding mee krijgt, dien je waardes bij elkaar op te tellen voor het eindresultaat.

 

Met getallen uit de stylesheet:

width: 150px;
padding: 90px 0px 0px 0px;

#menu is 150px breed met 0px padding links en rechts, totaal dus 150px.

width: 120px;
padding: 5px 25px 5px 25px;

#menu a is 120px breed met 25px padding links, 25px padding rechts en tekst uitlijning rechts en is hiermee 170px breed. De tekst begint feitelijk vanaf 25px in #menu en eindigt 20px buiten de rechterzijde. Rechts wordt echter beperkt door de breedte van het parent element #menu.

Voor #menu a zou het eigenlijk padding: 5px 5px 5px 25px; moeten worden en daarmee 150px breed.

 

Zie ook W3schools - CSS Padding

 

[Psychosammie]

@Con
Met WordPress hoef je niet te programmeren, alleen te configureren. Heb je deze ellende niet meer. Je provider levert waarschijnlijk wel WordPress.
Google maar eens op "wordpress voor beginners".