[CSS] Button text loopt uit - Softwareontwikkeling

vrijdag 11 januari 2008 12:10

Acties:

Topicstarter

Heey GoTers, ben ik weer!

nu mijn layout in orde is kom ik het volgende tegen, Ik probeer buttons toe te voegen. Dit is opzich geen probleem, zelfs een leuk hovertje, maar toch een fout.

Afbeeldingslocatie: http://img260.imageshack.us/img260/6397/32443113ok0.th.jpg

Zoals je kan zien op de meest rechter, ga ik heel veel knoppen gebruiken, komt er voor no reason een groot vak ertussen. Er zit geen <BR> in mijn code.

Bij de middelste zie je 5 knoppen, om de een of andere reden zie je ACT staan onderaan de buttons (van Contact natuurlijk;)). Maar ook hier zie ik geen reden voor.

in de derde zie je weer uitloop, dit keer alleen CT, hier is ook 1 button minder dan in de middelste.

Nu dan de Codes.

Voor de buttons gebruik ik:

Cascading Stylesheet:

a.nav:link, a.nav:visited {
font-family: arial;
font-size: 14px;
text-align: center;
text-decoration: none;
display: block;
width: 150px;
float: left;
margin-top: 12px;
padding: 4px;
background-color: #9c0101;
color: #ffffff;
}

a.nav:hover {
text-decoration: Underline;
}

en in HTML

HTML:

<div id="leftnav">
<a href="#" class="nav">HOME</a>
<a href="#" class="nav">ABOUT ME</a>
<a href="#" class="nav">WORK</a>
<a href="#" class="nav">CONTACT</a>
</div>

Div Leftnav =

Cascading Stylesheet:

#leftnav
{
background-color: #bfbfbf;
float: left;
width: 150px;
margin: 0;
}

het is redelijk standaard code voor buttons die je overigens overal van internet af kan plukken. Ik heb mijn code gecontroleerd en ik vind geen gaten of een manier hoe deze problemen kunnen ontstaan.

op google heb ik veel zoektermen gebruikt maar vaak kom je bij tuto's uit die je uitleggen hoe je een button maakt, niet hoe je het probleem oplost.

Ik hoop dat het een beetje duidelijk is want ik vind het zelf ook een beetje een vreemd probleem

[ Voor 8% gewijzigd door Tjirp op 11-01-2008 12:12 ]

vrijdag 11 januari 2008 12:17

Acties:

BtM909

Watch out Guys...

Met behulp van bovenstaande code is het probleem niet reproduceerbaar. Maak even een kleine testcase waarin het probleem zich openbaart en zet dat online. Dit maakt het makkelijker om te analyseren

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 11 januari 2008 13:07

Acties:

Tjirp

Topicstarter

BtM909 schreef op vrijdag 11 januari 2008 @ 12:17:
Met behulp van bovenstaande code is het probleem niet reproduceerbaar. Maak even een kleine testcase waarin het probleem zich openbaart en zet dat online. Dit maakt het makkelijker om te analyseren

testcase:

Style.css

Cascading Stylesheet:

body {
  text-align: center;

}

#container
{
width: 800px;
text-align: left;
margin: 0 auto;
border: 1px SOLID black;
padding: 0px;
}


#leftnav
{
background-color: #bfbfbf;
float: left;
width: 150px;
margin: 0;
overflow: hidden;
}

#content
{
margin-left: 150px;
padding: 1em;
max-width: 36em;
background-color: #cfcfcf;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { 
margin: 0 0 .5em 0;
color: red;
}


a.nav:link, a.nav:visited {
font-family: arial;
font-size: 14px;
text-align: center;
text-decoration: none;
display: block;
width: 150px;
float: left;
margin-top: 12px;
padding: 4px;
background-color: #9c0101;
color: #ffffff;
}

a.nav:hover {
text-decoration: Underline;
}

test.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titel</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">



<div id="leftnav">
<a href="#" class="nav">HOME</a>
<a href="#" class="nav">ABOUT ME</a>
<a href="#" class="nav">WORK</a>
<a href="#" class="nav">CONTACT</a>
</div>


<div id="content">
<h2>tekst test 1</h2>
<p>
Een hele groote maar niet zo mooie lap tekst om mee te testen <br>
</p>
</div>
</div>
</body>
</html>

(maak 1 maal een bestand style.css aan en zet daar de CSS code in, maak 1 bestand test.html aan en zet hier de HTML code in, open test.html en je ziet het probleem)

Ik maak gebruik van Internet Explorer 6, update XP2.
zowel de html en css valideren zoals het hoort.

ps. ik ben momenteel niet in de mogelijkheid dit up-te-loaden omdat om mijn werk poort 21 niet doorgaat. vanmiddag kan ik hem uploaden.

[ Voor 3% gewijzigd door Tjirp op 11-01-2008 13:08 ]

vrijdag 11 januari 2008 13:09

Acties:

disjfa

be

overflow auto op de container, een element met een clear:both onderaan in de container. Etc etc.

/basic

Is dit niet hetzelfde probleem als je vorige topic

Of begrijp ik het nou verkeerd
[CSS] Div achtergrond kleur vult niet.

[ Voor 40% gewijzigd door disjfa op 11-01-2008 13:14 ]

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 11 januari 2008 13:16

Acties:

Tjirp

Topicstarter

disjfa schreef op vrijdag 11 januari 2008 @ 13:09:
overflow auto op de container, een element met een clear:both onderaan in de container. Etc etc.

/basic

Is dit niet hetzelfde probleem als je vorige topic Of begrijp ik het nou verkeerd
[CSS] Div achtergrond kleur vult niet.

De TEKST loopt door onderaan. ik heb de hele code laten crimpen hier om het makkelijk te kunnen posten.
zoals ik zelf aangeef ben ik er weer en is de layout wel goed.

het gaat hier niet om dat witte stuk rechtsonder (als je de moeite heb genomen om hem na te maken) maar om de "CT" die onderaan de buttons staat.

vrijdag 11 januari 2008 13:25

Acties:

disjfa

be

Ooooh. Dat is zo te zien gewoon een rare IE renderbug. Als je gewoon de float en de breedte van de knoppen weg haalt (wat al overbodig was) dan klopt het toch?

Je content staat ook niet lekker in de flow van je document he

[ Voor 17% gewijzigd door disjfa op 11-01-2008 13:27 ]

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 11 januari 2008 14:17

Acties:

Tjirp

Topicstarter

disjfa schreef op vrijdag 11 januari 2008 @ 13:25:
Ooooh. Dat is zo te zien gewoon een rare IE renderbug. Als je gewoon de float en de breedte van de knoppen weg haalt (wat al overbodig was) dan klopt het toch?

Je content staat ook niet lekker in de flow van je document he

das inderdaad een stomme renderbug ><

Ik ben redelijk nieuw op CSS gebied, fuck it, helemaal nieuw op CSS gebied, heb wel wat ervaring met HTML maar ik leer nog veel. Deze probleempjes zijn moeilijk te vinden op het internet, en vaak word de oplossing in vaktaal verteld.

ik heb mezelf een beetje aangeleerd zo specifiek mogelijk te zijn nu in CSS. dus ook de width mee te geven etc.etc.

overigens ben ik nu puur bezig met testen van wat mij lukt. als ik eenmaal een volledige layout in CSS/HTML compleet heb en er tevreden mee ben (maandje of 2 gok ik;)) ga ik opnieuw beginnen maar dan met PHP. dus ik zal waarschijnlijk nog vaak terugkomen.

Thanks,

(ps. misschien was mijn vorige reactie een beetje geirriteerd overigens, was op het werk en de receptioniste zat te zuren >< mijn excuus.)

vrijdag 11 januari 2008 16:19

Acties:

Kiphaas7

Meestal worden voor menu's lijsten gebruikt, waarom doe je dat hier niet? Serieuze vraag, niet sarcastisch of dergelijk.

dus iets als:

HTML:

<ul id="leftnav">
   <li class="eenclass"><a href="#" title="foo1" class="nogeenclass">foo1</a></li>
   <li class="eenclass"><a href="#" title="foo2" class="nogeenclass">foo2</a></li>
   <li class="eenclass"><a href="#" title="foo3" class="nogeenclass">foo3</a></li>
</ul>

[ Voor 16% gewijzigd door Kiphaas7 op 11-01-2008 16:20 ]