login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Buttons overlappen

Offline Richie01 - 25/02/2010 21:33 (laatste wijziging 25/02/2010 21:34)
Avatar van Richie01Nieuw lid Hallo,

Ik ben nogmaals op een probleem gestuit. Ik heb buttons gemaakt, bijvoorbeeld een witte tekst 'Home' die veranderd naar de kleur roze wanneer je er overheen gaat. Zo nog een aantal buttons. Heb ze allemaal appart gedaan, omdat ze allemaal in één file ook niet echt werkte (stonden ze helemaal door elkaar). Dus de witte en mouseover versie van Home in één fireworks png'tje. Daarna in mijn CSS verwerkt, zover ik weet goed. Maar wanneer ik de volgende button erbij zet (een stukje ernaast) werkt van de Home-button alleen nog maar de linker-helft. De rechtse helft wordt overlapt, denk ik. Wanneer ik er nog een button naast plaats, wordt ook de button naast Home overlapt, en die kan ik dan bijna helemaal niet meer inklikken. Ik heb al verschillende dingen geprobeerd, en ben nu nog wat aan het knutselen, maar ik heb het nog niet opgelost gekregen. Weet iemand hoe ik het op kan lossen?

Hier mijn CSS vanaf de Menubar: http://www.plaatscode.be/138746/

Met vriendelijke groeten,

Richie

12 antwoorden

Gesponsorde links
Offline vinTage - 25/02/2010 21:36
Avatar van vinTage Nieuw lid Een online voorbeeld (html versie dus) is veel handiger dan een paar nietszeggende regels css.
Wat je zou kunnen doen is iig een width opgeven en met margin/padding werken.
Offline Richie01 - 25/02/2010 21:47
Avatar van Richie01 Nieuw lid Ik zou zo snel echt niet weten waar ik een voorbeeld vandaan moet plukken.
Maar ik begrijp ook niet helemaal waarvoor precies een voorbeeld nodig is, want is vrij simpel (denk ik); de buttons worden overlapt. Maar ik weet niet hoe ik het op moet lossen.

Bovendien heb ik overduidelijk in mijn CSS met width gewerkt en margin's. Met paddings heb ik nog niet gewerkt eigenlijk, ik dacht altijd dat dat hetzelfde was als margins.
Offline Filip - 25/02/2010 21:52 (laatste wijziging 25/02/2010 21:53)
Avatar van Filip IRC guru Hoe kunnen we nu het probleem bekijken als we niet kunnen zien waar en hoe het probleem zich voordoet...?

PS: margins is ongeveer hetzelfde dan paddings, enkel is een padding aan de binnenkant, en een margin aan de buitenkant
Offline Richie01 - 25/02/2010 21:57
Avatar van Richie01 Nieuw lid Ik ben vrij dom heb ik het gevoel haha. Hoe kan ik mijn site dan als voorbeeld laten zien? Denk dat het komt omdat ik al erg moe ben. Ik bedoel, niet alleen home.html en style.css is nodig, ook dat mapje images. Maar ik weet zo snel eigenlijk niet hoe ik dat kan laten zien.
Offline vinTage - 25/02/2010 22:00
Avatar van vinTage Nieuw lid Gewoon de url geven naar je site. moeilijker is het niet 
Offline Richie01 - 25/02/2010 22:03
Avatar van Richie01 Nieuw lid Ja, haha, dat snap ik, maar hij staat nog niet online. 
Dus weet ik niet hoe ik hem online moet zetten zonder dat het geld kost, om het probleem even te laten zien.
Offline Filip - 25/02/2010 22:07 (laatste wijziging 25/02/2010 22:08)
Avatar van Filip IRC guru Zet je html code op http://www.plaatscode.be , en geef ons de link.. Daar kunnen we al aardig wat aan zien..
Offline Richie01 - 25/02/2010 22:11
Avatar van Richie01 Nieuw lid Oh, op die manier! Haha, ik dacht dat je heel de site moest hebben (alles compleet). http://www.plaatscode.be/138747/

Dit is mijn HTML-code.
Offline vinTage - 25/02/2010 22:13 (laatste wijziging 25/02/2010 22:14)
Avatar van vinTage Nieuw lid Een link naar een online versie van je site ja, dan kunnen we klooien met de webdevtoolbar, ik ga iig niet net zoals nephilim de codes copy/pasten in testbestandjes en zonder images werken 

je ul tag is sowieso niet afgesloten.
Daarnaast gebruik je die tag helemaal fout....
Offline Richie01 - 25/02/2010 22:20
Avatar van Richie01 Nieuw lid Bedoel je dan dat ik die ul maar 1 keer moet gebruiken, van die buttons. En dan de buttons eronder met li id?
Want dat had ik eerst. Had alle buttons samen in één png'tje gestopt en dan gebruikt. Ik heb overigens deze site als hulp gekregen op een ander forum: http://home.tis...enblok.htm

Dan kreeg ik dus mijn buttons onder elkaar, en had ik ergens anders gevonden dat ik float:left moest gebruiken om ze netjes naast elkaar horizontaal te krijgen, maar dan kwamen de eerste 4 buttons op de juiste hoogte, maar de andere 3 kwamen opeens op een regel daaronder en die kreeg ik ook niet fatsoenlijk.

Overigens was me het einde van die ul-tag nog niet eens opgevallen, haha. Maar ik heb hem nu afgesloten, al heeft dat niet veel verschil op mijn site, want de buttons worden nog steeds overlapt door de button die ernaast staat.
Offline vinTage - 25/02/2010 22:30
Avatar van vinTage Nieuw lid Je hebt in je ul tag, de opmaak gegeven, die imo aan een li tag gegeven moet worden.

  1. <ul>
  2. <li id ="..">...</li>
  3. <li id ="..">...</li>
  4. <li id ="..">...</li>
  5. </ul>
Offline Richie01 - 26/02/2010 07:29 (laatste wijziging 26/02/2010 13:14)
Avatar van Richie01 Nieuw lid EDIT
Kan iemand mij dus uitleggen hoe ik anders horizontaal naast elkaar buttons kan plaatsen, of een tutorial.

Als ik ze op die manier plaats, met niks achter <ul> (dus wat ik eerst had <ul id="...">), dan krijg ik dus echt een lijst met bolletjes. Oh, wacht, ik las het verkeerd. Straks even kijken, ik moet nu eerst naar school.

Maar ik moet dus alle knoppen in één bestandje opslaan, right? Net zoals op deze site, die ik je al had gegeven. Dat had ik eerst gedaan. Zowat netjes die hele code overgenomen (zowel de CSS als de HTML) met mijn eigen maten, maar dan verschijnen alle knoppen dus onder elkaar. Wanneer ik dan float:left toevoeg, staan opeens de eerste 4 knoppen over de gehele regel verspreid en de andere 2 knoppen die er eigenlijk nog naast moeten staan opeens op de regel daaronder. En dan krijg ik dát ook niet voor elkaar om op te lossen, want dat heb ik al 4 keer gisteren geprobeerd. Is er dan iemand die dat probleem toevallig kan oplossen? Want dat scheelt me een hoop werk als ik gewoon de buttons in één bestandje kan gebruiken. 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s