[CSS] Spacer verschijnt niet - Softwareontwikkeling

woensdag 17 oktober 2012 14:31

Acties:

0 Henk 'm!

Certified n00b

Topicstarter

Ik ben bezig met een horizontaal menu, en ik wil tussen de menu-items een spacer, in de vorm van een image. Ik kan het wel uitleggen, maar ik heb de relevante css&html in een jsfiddle gezet: http://jsfiddle.net/zNw3L/4/

Op een of andere manier verschijnt de spacer niet, en ik heb geen idee waarom niet. Iemand een idee?

EDIT: Dit was de oplossing:

Cascading Stylesheet:

1
2
3

li:before{
    content:'|';
}

nog even opletten dat je eerste child dit niet doet:

Cascading Stylesheet:

1
2
3

li:first-child:before{
    content: ' '!important;
}

[ Voor 24% gewijzigd door Beatboxx op 25-10-2012 17:49 ]

woensdag 17 oktober 2012 15:20

Acties:

0 Henk 'm!

Raynman

Het is een leeg element met position:absolute en geen width/height.

woensdag 17 oktober 2012 15:51

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Waarom niet de <LI> een padding-left en background-image geven?

Verder inderdaad wat hier boven al gezegd wordt; het element is leeg dus heeft niet automatisch width/height.
Kijk ook eens naar 'content: "";'

[ Voor 51% gewijzigd door OkkE op 17-10-2012 15:54 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 17 oktober 2012 16:29

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Zet je code eens gewoon in het topic neer. Op deze manier heeft niemand meer iets aan je topic als jsFiddle een keer down is of je entry verwijdert.

Ik heb trouwens in 4 jaar professioneel webdevelopment en daarvoor 3 jaar minder professioneel webdevelopment (

) nog nooit een spacer image nodig gehad.

[ Voor 34% gewijzigd door NMe op 17-10-2012 16:34 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 17 oktober 2012 16:30

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

OkkE schreef op woensdag 17 oktober 2012 @ 15:51:
Waarom niet de <LI> een padding-left en background-image geven?

Of evt gewoon een border van een paar px, gezien het plaatje hier maar een klein blokje is.

woensdag 17 oktober 2012 16:36

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

TERW_DAN schreef op woensdag 17 oktober 2012 @ 16:30:
[...]

Of evt gewoon een border van een paar px, gezien het plaatje hier maar een klein blokje is.

Dat zou ook kunnen. Hoewel ik vaak een streepje ter hoogte van alleen de "x" mooier vind dan ter hoogte van de volledige line-height.

NMe schreef op woensdag 17 oktober 2012 @ 16:29:
Ik heb trouwens in 4 jaar professioneel webdevelopment en daarvoor 3 jaar minder professioneel webdevelopment () nog nooit een spacer image nodig gehad.

Jij doelt op de 'beroemde' 1x1.gif, 1px.gif, spacer.gif?

In dit geval gaat het om een image die als scheidingsteken dient tussen twee menu items.

Die ben ik ook regelmatig tegen gekomen in ontwerpen.

[ Voor 41% gewijzigd door OkkE op 17-10-2012 16:42 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 19 oktober 2012 16:32

Acties:

0 Henk 'm!

Grijze Vos

Dat noemen we een seperator, geen spacer.

En waarom een background image voor zoiets simpels?
(evt je margins op je li e.d. fixen en dan kun je gewoon met padding werken.)

Cascading Stylesheet:

li + li:before {
position: relative;
left: -10px;
display:inline-block;
content: "";
height: 15px;
width: 3px;
background-color: #272727;
}

[ Voor 86% gewijzigd door Grijze Vos op 19-10-2012 16:51 ]

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

vrijdag 19 oktober 2012 17:48

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

OkkE schreef op woensdag 17 oktober 2012 @ 16:36:
Jij doelt op de 'beroemde' 1x1.gif, 1px.gif, spacer.gif? In dit geval gaat het om een image die als scheidingsteken dient tussen twee menu items. Die ben ik ook regelmatig tegen gekomen in ontwerpen.

Ook daar heb ik sinds ik weet wat ik doe geen losse images (als in: <img>) voor nodig gehad.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zaterdag 20 oktober 2012 00:51

Acties:

0 Henk 'm!

meneer william

Humm kan je wel laten zien hoe ik dit zou doen,

Live voorbeeld: http://217.121.76.24:8888...tons%20animated/test.html

code:

HTML: index.html

<html>
<head>
    <link rel=StyleSheet href="st.css" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="dynamictext.js"></script>
</head>
<body>

<div class="deze">
     <a href=""><div class="knop">knop</div></a><div class="streep"></div>
     <a href=""><div class="knop">knop2</div></a><div class="streep"></div>
     <a href=""><div class="knop">knop3</div></a><div class="streep"></div>
     <a href=""><div class="knop">knop4</div></a><div class="streep"></div>
</div>

</body>
</html>

Cascading Stylesheet: st.css

 
.deze{
   height:30px;
   width:600px;
   background-color:green;
   line-height:29px;
}

.knop{
   background-color:green;
   color:yellow;
   font-family:Arial,sans-serif;
   height:30px;
   float:left;
   padding:0px 10px 0px 10px;
}

.streep{
   background-color:yellow;
   height:30px;
   width:2px;
   float:left;
}

a{text-decoration:none;}
.knop:hover   {background-color:yellow;color:green;}

Het maakt geen gebruik van li maar je doet het er maar mee

het ziet er goed uit

. Ik gebruik dit meestal bij webapplicaties waarbij ik een horizontaal menu moet maken.

sirwilliam

zaterdag 20 oktober 2012 00:56

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Een block level element (div) in een text-element (a) zetten is niet netjes. Sowieso zie ik geen reden voor die hele div in je anchor omdat je je anchor ook zou kan stylen. Een aparte div voor strepen is ook nergens voor nodig.

Een ul met li's en daarbinnen anchors geeft je 3 niveau's aan elementen die je kan stylen. Dat hoort gewoon genoeg te zijn en daarbij is dat ook nog eens semantisch correct.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zaterdag 20 oktober 2012 01:06

Acties:

0 Henk 'm!

meneer william

NMe schreef op zaterdag 20 oktober 2012 @ 00:56:
Een block level element (div) in een text-element (a) zetten is niet netjes. Sowieso zie ik geen reden voor die hele div in je anchor omdat je je anchor ook zou kan stylen. Een aparte div voor strepen is ook nergens voor nodig.

Een ul met li's en daarbinnen anchors geeft je 3 niveau's aan elementen die je kan stylen. Dat hoort gewoon genoeg te zijn en daarbij is dat ook nog eens semantisch correct.

Wel afgezien dat het een oud stukje code is wat ik ooit gemaakt heb: Mwja je hebt wel ongeveer gelijk. Het streepje kan ook een border zijn en het <a> element maakt het divje een link. Krom maar ja het werkt wel!

Daarbij kan een div overall gebruikt voor worden. Je kan je eigen element ermee definiëren maar de afgesproken functie is natuurlijk om er elementen in één divisie te stoppen en zo op te maken. Dat is dan ook waar de afkorting voor staat. Div == division en je moet zeggen het doet wat het moet doen. http://217.121.76.24:8888...tons%20animated/test.html

Maar bijna alle websites maken gebruik van de van een list om een horizontale balk te maken dus je hebt gewoon gelijk niks meer niks minder

nouw ga ik

[ Voor 10% gewijzigd door meneer william op 20-10-2012 01:13 ]

sirwilliam

dinsdag 23 oktober 2012 09:13

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

meneer william schreef op zaterdag 20 oktober 2012 @ 01:06:
[...]

Wel afgezien dat het een oud stukje code is wat ik ooit gemaakt heb: Mwja je hebt wel ongeveer gelijk. Het streepje kan ook een border zijn en het <a> element maakt het divje een link. Krom maar ja het werkt wel!

Humm kan je wel laten zien hoe ik dit zou doen,

Doe het dan ook niet... Je geeft een outdated, maar bovenal verkeerd, voorbeeld wat de topicstarter misschien weer zo over neemt.

Daarbij kan een div overall gebruikt voor worden. Je kan je eigen element ermee definiëren maar de afgesproken functie is natuurlijk om er elementen in één divisie te stoppen en zo op te maken. Dat is dan ook waar de afkorting voor staat. Div == division en je moet zeggen het doet wat het moet doen. http://217.121.76.24:8888...tons%20animated/test.html

Een div kan niet overal (of overall) worden gebruikt. Het is ook geen ding om je eigen element mee te definiëren (dus doe dat ook niet

)

@Beatboxx, wil je nog even je code in de topicstart editten (die lousy 30-40 regels) zoals NMe in "[CSS] Spacer verschijnt niet" al vroeg?

[ Voor 7% gewijzigd door BtM909 op 23-10-2012 09:15 ]

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.

dinsdag 23 oktober 2012 15:10

Acties:

0 Henk 'm!

DeAbdy

Ik heb een aantal dingen veranderd en de <li> gewoon een breedte gegeven en dan text-align center. Ook de background heb ik op right gezet. Zie hieronder:

HTML:

code:

<ul id="hormenu">
<li><a href="#">Agenda</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links </a></li>
</ul>

CSS:

code:

#hormenu li{
    list-style:none;
    float:left;
    margin-top:5px;
    width: 80px;
    text-align: center;
}

#hormenu li:first-child{
    margin-left:0;
}

#hormenu a{
    text-decoration:none;
    color:#696969;
    font-family:helvetica;
    line-hight:30px;
    vertical-align:central;
    
}

#hormenu a:hover{
    color:#272727;
}

li{
display:block;
margin-top: 0;
background: url('http://i46.tinypic.com/1124wox.png') right center no-repeat;
}&#8203;

Hier ook nog de jsFiddle link:
http://jsfiddle.net/zNw3L/42/

dinsdag 23 oktober 2012 15:58

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Excuse me, maar help je de topicstarter of ben je de topicstarter?

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.

woensdag 24 oktober 2012 02:43

Acties:

0 Henk 'm!

gebruikershaes

Ja zo werkt het idd, maar dan nog kan je naar mijn idee beter "border-right: 3px solid #000;" gebruiken. Zo hoef je geen externe plaatjes in te laden en is het weer ietsjepietsje sneller

.

En als je het te hoog vindt wat je eerder aangaf, geef je het een "height:15px;" oid mee.

woensdag 24 oktober 2012 13:17

Acties:

0 Henk 'm!

Grijze Vos

meneer william schreef op zaterdag 20 oktober 2012 @ 01:06:
[...]

Daarbij kan een div overall gebruikt voor worden. Je kan je eigen element ermee definiëren maar de afgesproken functie is natuurlijk om er elementen in één divisie te stoppen en zo op te maken. Dat is dan ook waar de afkorting voor staat. Div == division en je moet zeggen het doet wat het moet doen. http://217.121.76.24:8888...tons%20animated/test.html

Als we het dan toch over afspraken hebben. Kijk eens naar nieuwste versie van die afspraken. In deze spec, en overigens ook in die van html4 wordt afgesproken om semantisch correcte elementen te gebruiken daar waar het kan.

Een lijst items representeer je in html dan ook met een lijst (ul of ol), en niet met een groep divjes achter elkaar. divs hebben -geen- semantische waarde.

Ik vind het best dat jij graag in het jaar 1999 wilt blijven hangen met je markup, maar ik begin me er op tweakers steeds meer en meer te ergeren aan het uitermate droevige advies wat door sommigen gegeven wordt in topics. Sommige mensen moeten wat meer lurken en wat minder posten, daar leert men misschien nog wat van.

/rant

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

donderdag 25 oktober 2012 17:49

Acties:

0 Henk 'm!

Beatboxx

Certified n00b

Topicstarter

Sorry dat t zo lang heeft geduurd. De truc was heel simpel dit:

Cascading Stylesheet:

1
2
3

li:before{
    content:'|';
}

nog even opletten dat je eerste child dit niet doet:

Cascading Stylesheet:

1
2
3

li:first-child:before{
    content: ' '!important;
}

vrijdag 26 oktober 2012 08:53

Acties:

0 Henk 'm!

Grijze Vos

Of je gebruikt li + li:before, zoals ik een week geleden al postte in dit topic.

(En als je jouw syntax wilt gebruiken, gebruik dan iig niet die important tag, die is overbodig.)

[ Voor 38% gewijzigd door Grijze Vos op 27-10-2012 12:22 ]

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info