Archief - CSS problemen

Ultimus · 12 sep 2011

Hallo iedereen

ik ben bezig met een horizontaal css menu. Echter doet hij voor de een of andere reden niet wat ik verwacht. Mijn menuitem resized vanaf ik hierover hover. Hij resized naar de grote van de onderliggende submenuitem.

dus concreet: bij het hoveren over het menuitem dan resized het menuitem naar de grote van de onderliggende subitem en dit enkel wanneer dit subitem groter is dan het bovenliggend menuitem.

hierbij mijn css. Als iemand weet waar ik de mist in ga zou dat enorm welkom zijn

.

Code:

#menu{
	background-color: #342f28;
	width: 950px;
	height:auto;
	color: #b8a372;

	border-bottom: 1px solid white;
	border-top: 1px solid white;
	padding: 0px;
}

ul{
	display:inline;
	width: auto;
	float: left;
	text-decoration:none;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-right: 1px solid #CCC;

}

li{
	display:none;
}


ul:hover li{
	position: relative;
	display:block;
	background-color: black;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: auto;
	border: 1px solid white;
	top: -2px;
	float:none;
	white-space:nowrap;
}

ul li:hover{
	background-color: white;
}

-BVR- · 12 sep 2011

Uw css is ongelooflijk onlogisch. Ik hoop dat ge deze niet zelf geschreven hebt, maar langs de andere kant ook niet dat ge een wysiwyg editor gebruikt hebt. En ja, zet misschien een test case online. En hoe gaat dat ooit werken met li {display:none;}?

Ultimus · 12 sep 2011

Hoi

css jammer genoeg wel zelf geschreven al is het maar op 5 minuten. En waarom de li display:none: wel omdat ik hiermee de submenu's verberg. vervolgens zet ik hen terug zichtbaar bij de hover over de overkoepelende ul. Ik heb er inderdaad ondertussen nog andere fouten uitgehaald. Zo heb ik het menu een fixed height gegeven ipv auto.

Het menu werkt perfect echter 1 probleem: wanneer ik over de ul hover dan gaat deze resizen om de volledige submenu te omvatten. De vraag is eigenlijk hoe zorg ik ervoor met floats dat de bovenliggende div niet gaat resizen als ik een dropdown menu open?

alvast bedankt voor de feedback.

Ultimus · 12 sep 2011

even de html erbij doen...

HTML:

<body>
<div id="main">

<div id="banner"><img src="Images/banner.png" width="950" height="141" alt="banner" /></div>
<div id="menu">
<ul>Home</ul>
<ul>Producten
	<li>Budget</li>
    <li>Basic</li>
    <li>Special</li>
    <li>Nieuw</li>
    <li>Promoties</li>
</ul>
<ul>Diensten
	<li>Kantoorinrichting</li>
    <li>Levering &amp; Montage </li>
    <li>Advies</li>
    <li>Garantie</li>
    <li>Hersteldienst</li>
</ul>
<ul>Over ons</ul>
<ul>Contact</ul>

</div>

huidige CSS....

Code:

#menu{
	background-color: #342f28;
	width: 950px;
	height:25px;
	color: #b8a372;
	border-bottom: 1px solid white;
	border-top: 1px solid white;
	padding: 0px;
}

ul{
	display:inline;
	width: auto;
	float: left;
	text-decoration:none;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-right: 1px solid #CCC;

}

ul li{
	display:none;
	top: 4px;
	margin-top: -1px;
}



ul:hover li{
	position: relative;
	display:block;
	background-color: #342f28;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: auto;
	border: 1px solid white;
	float:none;
	white-space:nowrap;
}

ul li:hover{
	background-color: white;
}

-BVR- · 12 sep 2011

Zo maak je géén menu ...

HTML:

<ul>
<li>Home</li>
<li>Producten
  <ul>
    <li>budget</li>
    <li>basic</li>
    <li></li>
  </ul>
</li>
<li>Over ons</li>
<li>Contact</li>
</ul>

Zo wel.

Nogmaals, zet een test case online aub.

Kilghard · 12 sep 2011

& zoals zo vele... het zelf uitvogelen is natuurlijk fijn....
maar tutorials & boeken zijn er voor een reden ...

Dit is toch echt wel basic stuff

Begin al eens met classes & beter css opbouw

Ultimus · 13 sep 2011

seg seg ik ben geen noob he

mijn menu werkt met uitzondering van dat 1 kleine akkefietje. Ik heb reeds uren en uren geprobeerd dit op te lossen. Ben al paar keer opnieuw begonnen maar krijg steeds het zelfde. Hoe je dit benaderd is ieder zijn eigen zin natuurlijk.

wat moet je hier doen om een attachment te kunnen posten? (jpg van het probleem)

ps: dit is mijn code en geen copy van het internet

Curahee Q · 13 sep 2011

Afbeelding via imageshack.us ofzo linken.

-BVR- · 13 sep 2011

n/o, maar nogmaals: Zo maak je geen lijst. Waarom dan nog het in een 'ul' steken (allemaal aparte ul's, dus heel uw structuur trekt op niets)? Nogmaals, zo maakt ge géén degelijk menu.

En testcase = testpagina met code. Geen afbeelding. Daar zijn we weinig mee. Stuur desnoods uw testcase naar mij door en ik zet ze wel ff online.

Ultimus · 14 sep 2011

BramVroy zei:
n/o, maar nogmaals: Zo maak je geen lijst. Waarom dan nog het in een 'ul' steken (allemaal aparte ul's, dus heel uw structuur trekt op niets)? Nogmaals, zo maakt ge géén degelijk menu.

En testcase = testpagina met code. Geen afbeelding. Daar zijn we weinig mee. Stuur desnoods uw testcase naar mij door en ik zet ze wel ff online.

Bram,

dank je voor de hulp. Hoe kan ik je mijn testcase doorsturen?

om te antwoorden op je vraag waarom het nog in een ul steken: om de opmaak te kunnen doen. Mijn html code van de menu vind ik persoonlijk wel structureel in orde. Ik heb het ook geprobeerd op jou manier maar blijf het zelfde probleem hebben. Komt ook op het zelfde neer natuurlijk. Welke tags je welke properties geeft heeft weinig belang denk ik dan.

de image kan ik wel al delen ... cssproblem.jpg/\

nog even ter verduidelijking: mijn unsorted list heeft een padding van 10px rechts en links met een automatische breedte. Echter bij de hover gaat hij de breedte van deze ul toch aanpassen. 'Diensten' uit de afbeelding zou dus enkel 10 px mogen hebben rechts maar zoasl je ziet gaat hij de onderliggende list items omarmen (ook te zien aan de 'border' rechts die naar beneden uitloopt).

-BVR- · 14 sep 2011

Zie PM

Ultimus · 15 sep 2011

BramVroy zei:
Zie PM

Heb je de bestanden aangekregen?

Xavez · 15 sep 2011

Menu voorbeeld

Check de code eens. Heb ik (een hele while ago) voor de lol gemaakt, denk dat het uw probleem wel oplost?

Ultimus · 16 sep 2011

BramVroy zei:
Zo maak je géén menu ...

HTML:

<ul> <li>Home</li> <li>Producten <ul> <li>budget</li> <li>basic</li> <li></li> </ul> </li> <li>Over ons</li> <li>Contact</li> </ul>

Zo wel.

Nogmaals, zet een test case online aub.

ik heb gevonden wat er mis was. mijn submenu's moesten op position absolute. De parent op position relative. vervolgens liep ik tegen het probleem dat mijn subitems allemaal boven elkaar kwamen en dan moet ik bekennen dat mijn manier niet de goede was. door de extra ul's toe te voegen kon ik ze wel weer mooi positioneren en opgelost was het probleem

. Met veel dank aan BramVroy

.

als toemaatje nog even de code....

HTML:

<ul>
	<li>Home</li>
    <li>Producten
        <ul>
            <li>Budget</li>
            <li>Basic</li>
            <li>Special</li>
            <li>Nieuw</li>
            <li>Promoties</li>
        </ul>
    </li>

    <li>Diensten
        <ul>
            <li>Kantoorinrichting</li>
            <li>Levering &amp; Montage </li>
            <li>Advies</li>
            <li>Garantie</li>
            <li>Hersteldienst</li>
        </ul>
    </li>
    <li>Over ons</li>
    <li>Contact</li>
</ul>

en de css...

Code:

#menu{
	background-color: #342f28;
	width: 950px;
	height:25px;
	color: #b8a372;
	border-bottom: 1px solid white;
	border-top: 1px solid white;
	padding: 0px;
}

ul{
	float: left;
	width: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li{
	position: relative;
	display:inline-block;
	width: auto;
	float: left;
	text-decoration:none;
	margin: 0px;
	padding: 3px 10px 3px 10px;
	border-right: 1px solid #CCC;
}

ul li ul{
	display:none;
}



ul li:hover ul{
	display:block;
	position: absolute;
	top:100%;
	left: 0;
	min-width: 100px;
	margin: 1px 0px 0px -1px;
}

ul li ul li{
	display:block;
	background-color: #342f28;
	padding: 3px 10px 3px 10px;
	width: 100%;
	border: 1px solid white;
	margin-top: -1px;
}

ul li ul li:hover{
	background-color: white;
}

Archief - CSS problemen

Ultimus

Legacy Member

-BVR-

Legacy Member

Ultimus

Legacy Member

Ultimus

Legacy Member

-BVR-

Legacy Member

Kilghard

Legacy Member

Ultimus

Legacy Member

Curahee Q

Legacy Member

-BVR-

Legacy Member

Ultimus

Legacy Member

-BVR-

Legacy Member

Ultimus

Legacy Member

Xavez

Legacy Member

Ultimus

Legacy Member