Soort Dropdown (onder link)

Status
Niet open voor verdere reacties.
L

larsmickey

Gebruiker
Lid geworden
8 sep 2012
Berichten
48
Ik wil een soort dropdown menu maken.
Als je over een link heen gaat bijv. friet dat er dan een menu/venster komt waarin je dan bijv. aardapel en proces enz. staat
een beetje net als hier:Hier als je bij een artiest op artiest gaat staan komt er een menu naar beneden dat de overige pagina naar beneden drukt.
Ik hoop dat dit een beetje duidelijk is want ik weet niet precies hoe ik het uit moet leggen.

Lars
 
Dankje!
Ik denk dat dit gaat werken
Ik ga eens kijken!
__________________________________________________________________________________________________________________________
RandomHitsde website voor het luisteren naar je favoriete muziek!
 
Ik begrijp de website niet helemaal..
Hoe kom ik nu aan de html/css code??
____________________________________________________________________________________________________ ______________________
RandomHitsde website voor het luisteren naar je favoriete muziek!
 
hallo lars,

Als je op CSS text pop-up klikt en dan op lees meer.
Dan zie je daar "een voorbeeld van een image-popup" staan klik daar op en dan kom je uit op deze pagina
Als het dit is wat je wil of 1 van de ander 3 vb. van csshunter kan je om de code's vragen of naar de paginabron kijken ;).

vriendelijke groeten erten
 
Oké dankje wel!
Ik wou weten hoe je aan die code kwam, maar je moet dus naar de paginabron kijken
Dank je
 
Ik heb nu dit:
Code: 
/** Dropdown **/
body {
	width: 700px;
	margin: 20px auto;
	font-family: "trebuchet ms", arial, sans-serif;
	}

.more {
	position: relative;    /* popup komt relatief t.o.v. de popup-link */
		/* opmaak vergelijkbaar met echte link: */	
	color: #000000;
	font-style: normal;
	cursor: pointer;
	display: inline-block; /* alleen de link is hoverbaar, niet de hele regel */
	margin-top: 0;
	}
	
.more span {               /* dit is de popup-box */
	width: 80px;          /* incl. padding L/R: paginabreedte van hier 700px */
	position: absolute;    /* los van de rest van de pagina */
	top: 3px;	           /* iets onder de begin-hoogte van de popup-link */
	left: 0;               /* gelijk aan linkerkant van de popup-link */
	margin-left: -9999px;  /* normaal buiten beeld */
	z-index: 2;            /* in een laag boven de normale tekst */
		/* nu de inwendige zaken van de popup: */
	padding: 5px 10px 20px 10px;
	border: 1px solid black;
	background: #EEE8E8;
	color: black;
	font-style: normal;
	}

.more:hover span,
.more:focus span {       
	margin-left: 0;        /* popup-box op z'n plek bij een hover */
	}
/***
Maar dit zorgt ervoor dat mijn pagina naar links word verplaatst.
Weet iemand waar dit precies in zit?
 
De .more span {...} heeft bij jou een width: 80px > in het voorbeeld 680px. Moet de popup maar zo smal zijn?
Of misschien De Springende Pagina?
Het kan ook aan andere css/html-code op de pagina liggen (die staat er hierboven niet bij).

Met vriendelijke groet,
CSShunter
 
Ja de span moet maar zo klein zijn! kijk maar: randomhits
Maar ik kan moeilijk mijn css bestand van 600 regels erop zetten:cool:
__________________________________________________________________________________________________________________________
RandomHits de website voor het luisteren naar je favoriete muziek!
 
Aja, maar via de link kunnen we ook goed alles zien. :)

Ik zou beginnen de body {width: 700px} weg te halen, want de div#sw-error-box die er in moet zitten heeft een breedte van 970px: dat kan niet goed gaan! ;)

Om de popup-jes er mooi gecentreerd onder te krijgen, kan je dit doen:
  • Veranderen: .more span { left: 50%}
  • Veranderen: .more:hover span, .more:focus span { margin-left: -50px;}
Verder schrik ik een beetje van de broncode (de html-validator ook): dat er nog iets op scherm komt! :rolleyes:
  • Ik tel in de gauwigheid o.a.: 3 <head> tags, 4 </head> tags, 7 <body> tags, 2 </body> tags, 3 <!Doctype> elementen, 3 <html> tags, 2 </html> tags, enz.
  • Terwijl er van elk toch echt maar 1 gebruikt mag worden...
Is er misschien iets misgegaan met php-includes (ingesloten als iframe/pagina i.p.v. als puur code-fragment)?
 
Ik heb nu dit maar de <h3> tag werkt niet waardoor ''Top 40'' er anders uit ziet als de rest van de links
hoe los ik dit op?
Ik heb al de h3 elementen bij de .more gezet maar dit geeft nog niet het goede resultaat!
Code: 
.more {
	position: relative;    /* popup komt relatief t.o.v. de popup-link */
		/* opmaak vergelijkbaar met echte link: */	
	font-style: normal;
	cursor: normal;
	display: inline-block; /* alleen de link is hoverbaar, niet de hele regel */
	margin-top: 0;
	color:#333333;
	font-size:0.8em;
	font-family:'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;
	text-align:center;
	}
 
Een <h3> is uit zichzelf vet, een <p> niet. > Daarom toevoegen: .more {font-weight: bold;}, en de <p class="more"> wordt ook vet (inclusief de <span>-links die komen oppoppen).
 
Dankje
Ik heb nu wel het probleem dat als ik een 2de (of derde..) erop zet, dat ze dan last van elkaar hebben.
Want de 2de wordt dan ineens links uitgelijnd i.p.v. in het midden
hier de eerste is Top40 en de 2de is Efteling!
 
... dat ze dan last van elkaar hebben.
Klik om te vergroten...
Neehee, ze hebben geen last van elkaar. ;)

Want de 2de wordt dan ineens links uitgelijnd i.p.v. in het midden: de eerste is Top40 en de 2de is Efteling!
Klik om te vergroten...
Jaha, maar de Efteling zit ook niet in een <center> van een <div class="col>", zoals de Top40: de Efteling valt helemaal buiten de 4e kolom! :)

En als een webpagina plots niet doet wat je wilt ... (zie handtekening hieronder, en reactie nr. #10: 111 html-errors). :p
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan