element links verspreiden (justify?) binnen een <h> head - Softwareontwikkeling

vrijdag 19 september 2014 12:51

Acties:

0 Henk 'm!

HugoBoss1985

Xenotech

Topicstarter

Hallo Tweakers,

Sinds kort heb ik mij eerste website gemaakt, enkel met HTML en CSS.
Alles is naar mij zin maar nu zit ik met de volgende uitdaging.

Ik heb een aantal horizontale links naar de andere pagina's van mijn website, binnen een header.
Die head is 525px breed, zodat hij mooi gelijk is met de head daaronder.

Hoe krijg ik de verschillende knoppen met links op gelijke afstand van elkaar op gelijke afstand van het kader van de header?

Ik ben met deze uitdaging bezig gegaan nadat ik mijn pagina bekeek op mijn smartphone:
1 van de knoppen viel buiten de layout die op mijn pc wel goed was.
Mijn conclusief was de header te klein was voor goede weergave op mijn smartphone.
Daarna heb ik de header vergroot van 525px; naar 600px;
Maar, nu was de afstand tussen het kader en de knoppen ineens te groot en viel mij op dat de knoppen niet gecentreerd waren.
Dat leek me veel mooier en netter.

Ik heb online wat kunnen vinden over tekst-align: justify; maar dit doet niet wat ik wil... de knoppen blijven net zo ver van elkaar af staan.
Tekst align verplaats vaak alleen maar alle knoppen t.o.v. de header. (naar links)

Ook heb ik iets gevonden over word-spacing, dat zorgt wel voor méér ruimte tussen mijn knoppen...
Maar dan staan ze niet gecentreert t.o.v. de header.

In het kort: ik wil gelijke afstand tussen mijn knoppen en t.o.v. de header waarin ze staan.

De HTML:

code:

<html>

<head>

<link href="Style.css" type="text/css" rel="stylesheet">

</head>

<body>

<div id="main">

<h2>

<p0><a href="galerij">Galerij</a></p0>

<p1><a href="het-atelier">Het atelier</a></p1>

<p2><a href="over-mij">Over mij</a></p2>

<p3><a href="de-werkzaamheden">De werkzaamheden</a></p3>

<p4><a href="contact"><u>Contact</u></a></p4>

</h2>

</div>

</body>

</html>

De CSS:

code:

h2 {
font-family:"Times New Roman";
font-size: 14pt;
text-align: center;

padding: 20px;
margin: 5px auto;
border-style: solid;
border-width: 4px;
border-color: #366835;
width: 600px;
}

p0 {
    border-style: solid;
    border-width: 2px;
    border-color: #366835;
    padding: 3px;
    text-align: justify;
    position: relative;
    
}

p1 {
    border-style: solid;
    border-width: 2px;
    border-color: #366835;
    padding: 3px;
    text-align: justify;
    
    
}

p2 {
    border-style: solid;
    border-width: 2px;
    border-color: #366835;
    padding: 3px;
    text-align: justify;
}

p3 {
    border-style: solid;
    border-width: 2px;
    border-color: #366835;
    padding: 3px;
    text-align: justify;
}

p4 {
    border-style: solid;
    border-width: 2px;
    border-color: #366835;
    padding: 3px;
    text-align: justify;
}

[ Voor 14% gewijzigd door HugoBoss1985 op 19-09-2014 13:10 ]

vrijdag 19 september 2014 13:03

Acties:

0 Henk 'm!

Sebazzz

3dp

Stop je code eens in [code][/code] tags...

Los hiervan: Lees de HTML spec. P tags mogen niet in een H tag.

[ Voor 12% gewijzigd door Sebazzz op 19-09-2014 13:04 ]

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

vrijdag 19 september 2014 13:12

Acties:

0 Henk 'm!

HugoBoss1985

Xenotech

Topicstarter

Hoi,

Bedankt voor je reactie.

Inmiddels in de goede tags gezet.

Dat wist ik niet, ik zal het geheel eens anders gaan indelen en kijken of het dan wel mooi wordt.

Ik heb nu alle tags helemaal verwijderd, maar mijn probleem blijft hetzelfde.
Tekst-align; justify gooit alle knoppen helemaal naar links en houdt ze tegen elkaar aan...

[ Voor 46% gewijzigd door HugoBoss1985 op 19-09-2014 13:46 ]

vrijdag 19 september 2014 14:41

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Wat probeer je in hemelsnaam te bereiken?

vrijdag 19 september 2014 15:15

Acties:

0 Henk 'm!

vpm

Think, tinker, tank

Define <p#/>
Dit is een collectie van bad practises.

Text-align heeft enkel effect op tekst (bijv. binnen een p); Anchors blijven dus gewoon lekker staan.
Je kunt beter iets proberen met float en margin.

HugoBoss1985 schreef op vrijdag 19 september 2014 @ 12:51:
Alles is naar mij zin maar nu zit ik met de volgende uitdaging.

Gooi je website 'voor de grap' eens door http://validator.w3.org/. Is het nu nog naar je zin?

vrijdag 19 september 2014 20:15

Acties:

0 Henk 'm!

HugoBoss1985

Xenotech

Topicstarter

Dit is de eerste volledige website die ik gemaakt heb.
Wat ik hier gepost heb is maar een klein deel.

@VPM: bedankt voor de tip, de 's kunnen dus wegblijven.

Mijn website is dus naar mijn zin, behalve wat ik hier gepost heb...
Als ik mijn website door de validator gooi word hij succesvol gechecked als html5 site.

Ik wil mijn knoppen niet zoals hieronder in de header hebben...

| galerij het atelier overmij de werkzaamheden contact |

Maar dus met dezelfde afstand op elkaar en t.o.v. het gekleurde vak waarin ze staan....
Als we er even vanuitgaan dat de streepjes het vak zijn.

Ik heb al geprobeerd om met margin en float te werken... dat geeft niet het gewenste resultaat.

[ Voor 21% gewijzigd door HugoBoss1985 op 19-09-2014 20:19 ]

vrijdag 19 september 2014 22:13

Acties:

0 Henk 'm!

incaz

Als je je knoppen display: inline-block; geeft, dan kun je de breedte van elk onderdeel gewoon instellen op 100%/aantal knoppen.
Dat is vermoedelijk de makkelijkste oplossing.

Je kunt ook nog dingen doen met text-align: justify op de container die je knoppen bevat, maar daarbij moet je dan een element toevoegen want text-justify werkt op alle regels behalve de laatste, en als je maar 1 regel content hebt, doet dat dus niet wat je verwacht.
Zie bv http://www.barrelny.com/blog/text-align-justify-and-rwd/

En tot slot heb je nog flex. (Daarbij moet je even de juiste definities opzoeken, want die verschillen nog al over implementaties, en de details van flex heb ik nog steeds niet onder de knie.)

Never explain with stupidity where malice is a better explanation

vrijdag 19 september 2014 22:38

Acties:

0 Henk 'm!

steffeh

Allereerst zou ik proberen te begrijpen wat een is, dit is niet de oplossing voor een horizontaal menu, lees maar.

Ik zou eerst de basis van html&css proberen te begrijpen, want je definieert in je stylesheet nu vier keer een , onnodig en onoverzichtelijk. Misschien is dit iets om mee te beginnen? Klinkt heel flauw, maar probeer eerst te begrijpen wat de basis elementen doen.

Daarnaast, een menu bouw je op in een ul li structuur. Dus zoiets;

code:

<div class="menu-horizontal">

    <ul>
        <li><a href="#">Galerij</a></li>
        <li><a href="#">Het atelier</a></li>
        <li><a href="#">Over Mij</a></li>
        <li><a href="#">De werkzaamheden</a></li>
    </ul>

</div>

Die ul en li kun je vervolgens definiëren in je css, je kan ook de ul een class meegeven, zodat je meerdere ul styles kan definiëren op je website.

Een ul geef je een class door er <ul class="menu-horizontal"> aan mee te geven o.i.d.

In je css kan je hier dan weer allerlei voorwaarden aan mee gaan geven, een begin is om de rondjes te verwijderen.

code:

1
2
3

ul.menu-horizontal {
      list-style-type: none;
}

Hier staat nog het een en ander om je in te lezen, vooral veel proberen! Succes!

zaterdag 20 september 2014 10:05

Acties:

0 Henk 'm!

webdavid

Is die ul.menu-horizontal niet fout? Je hebt de div daarboven die class gegeven maar die ul niet. Of kan dit gewoon? en ik dacht ook dat je het op de li moest toepassen en niet op de ul.

Hoe ik meestal mijn menu's maak. ( ik weet niet of het goed is, heb er zelf ook nooit echt les in gehad).

HTML:

    <ul>
        <li><a href="">link1</a></li>
        <li><a href="">link2</a></li>
        <li><a href="">link3</a></li>
        <li><a href="">link4</a></li>
    </ul>

Cascading Stylesheet:

    li {
    list-style-type: none;
    float: left;
}

Zoals http://jsfiddle.net/80w99nvv/

daviddebestnl @ tweakers2 clash of clans || i5 4690 ~ gtx 750 ti

zaterdag 20 september 2014 11:26

Acties:

0 Henk 'm!

incaz

Webdavid: ja, prima, en inderdaad geldt ul.menu-horizontal voor een <ul class="menu-horizontal">.

Voor de goede orde kun je het trouwens nog binnen nav-tags gooien: http://html5doctor.com/nav-element/

Toevoeging: css-wise zou ik eerder gaan voor display: inline-block; dan float omdat dat de bounding box (je ul) netjes mee laat groeien, maar het brengt als nadeel mee dat spaties tussen de elementen roet in het eten kunnen gooien.

[ Voor 37% gewijzigd door incaz op 20-09-2014 11:29 ]

Never explain with stupidity where malice is a better explanation

zaterdag 20 september 2014 11:55

Acties:

0 Henk 'm!

steffeh

Klopt webdavid, staat er ook bij dat 'ie dan op de ul class moet worden gezet, je hebt gelijk over die li

( copy paste foutje

)

Zou zoiets zijn: http://jsfiddle.net/v3ce3eer/

Denk dat TS er nu wel uit moet komen.

[ Voor 12% gewijzigd door steffeh op 20-09-2014 12:15 ]

zaterdag 20 september 2014 12:29

Acties:

0 Henk 'm!

HugoBoss1985

Xenotech

Topicstarter

Hallo allemaal,

Bedankt voor de tips en nieuwe ideeën... ik ga er dadelijk even mee verder stoeien!

Edit:

Ik heb het nu zo opgelost:

code:

<div id="navigation">

<ul>

<li>
<a href="galerij">Galerij</a>
</li>

<li>
<a href="het-atelier">Het atelier</a>
</li>

<li>
<a href="over-mij">Over mij</a>
</li>

<li>
<a href="de-werkzaamheden"><u>De werkzaamheden</u></a>
</li>

<li>
<a href="contact">Contact</a>
</li>

</ul>

Met deze CSS:

code:

#navigation ul
 {
padding: 4px;
margin: 0px;
list-style-type: none;
text-align: center;
font-size: 14pt;
 }

#navigation ul li 
{ 
display: inline;
padding: 4px;
margin: 0px;
}

#navigation ul li a
 {
padding: 4px;
margin: 0px;
background-color: #FFFFFF;
border-style: solid;
border-width: 5px;
border-color: #366835;
 }

[ Voor 94% gewijzigd door HugoBoss1985 op 21-09-2014 20:28 ]

maandag 22 september 2014 11:19

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Als je het helemaal goed wil doen dan gebruik je een nav element in plaats van de div, dat helpt bij de toegankelijkheid en gebruiksvriendelijkheid van je website:

HTML:

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

maandag 22 september 2014 11:24

Acties:

0 Henk 'm!

TI_Observer

misschien moet je eerst eens de gratis cursus html/css doen op www.codecademy.com
uiteindelijk leer je daar een redelijke website te bouwen en je leert good practices

Ik lieg ALTIJD... zie je dat was weer een leugen!

<p> element links verspreiden (justify?) binnen een <h> head