<P> slaat een regel over.

Status
Niet open voor verdere reacties.
rikietje

rikietje

Gebruiker
Lid geworden
17 nov 2010
Berichten
154
Hallo,

Ik was bezig met het ontwerpen van een footer voor mijn website.

Zoals velen weten wordt er na het afsluiten van </p> een regel overgeslagen.

Dit wist ik op te lossen met de regel display: inline;
HTML: 
p.footer{
color:#ffffff;
display: inline;
}

Het probleem wat zich nu opdoet is dat de aligns niet meer werken.

Even een voorbeeld:

HTML: 
<p align='left' class='footer' > Copyright 2010 RikBeernink.nl</p>
<p align='center' class='footer' ><a href='index.php' class='footer'>Home</a> | Sitemap | News | Contact </p>
<p align='right' class='footer'>All rights reserved</p>

Dit zou er als volgt uit moeten zien :

Code: 
Copyright 2010                             RikBeernink.nl                         All rights reserved

Wat ik krijg is :

Code: 
Copyright 2010 Rikbeernink.nl All rights reserved



Waarom werkt die align nu niet meer?
 
wat je kan proberen is om de allign weg te laten er in de css floats neer te zetten float: right; enzo
 
tsja, misschien kan je het anders met left:50%; voor die middelste doen
 
Dit is denk ik nog de meest handige methode.
De HTML
HTML: 
<div class="footer">
<p> <span class="links">Linkertekst</span> middentekst <span class="rechts">rechtertekst</span></p>
</div>
Oftewel een div met daarin één enkele paragraaf (zodat je display:inline; niet hoeft te gebruiken) en in die div twee <span>s

De CSS
Code: 
.footer p{
text-align:center;
}

.footer .rechts{
float:right;
}

.footer .links{
float:left;
}
Met die CSS wil het hele zootje eerst op een kluitje in het midden staan maar de twee spans worden vervolgens naar rechts en naar links gefloat.

Example5 zei:
tsja, misschien kan je het anders met left:50%; voor die middelste doen
Klik om te vergroten...
Werkt niet goed. Dan komt de linkerrand van de tekst in het midden te staan, en dat is niet de bedoeling.
 
Laatst bewerkt:
Naarling zei:
Dit is denk ik nog de meest handige methode.
De HTML
HTML: 
<div class="footer">
<p> <span class="links">Linkertekst</span> middentekst <span class="rechts">rechtertekst</span></p>
</div>
Oftewel een div met daarin één enkele paragraaf (zodat je display:inline; niet hoeft te gebruiken) en in die div twee <span>s

De CSS
Code: 
.footer p{
text-align:center;
}

.footer .rechts{
float:right;
}

.footer .links{
float:left;
}
Met die CSS wil het hele zootje eerst op een kluitje in het midden staan maar de twee spans worden vervolgens naar rechts en naar links gefloat.


Werkt niet goed. Dan komt de linkerrand van de tekst in het midden te staan, en dat is niet de bedoeling.
Klik om te vergroten...

Super bedankt!
 
Align werkt niet meer omdat dit alleen van toepassing is op block level elementen, en je maakt in je css van <p> een inline element, dus eigenlijk is het gedrag logisch.

Hier staat wat meer info over block level vs inline elementen. Wel handig om door te lezen als je CSS beter wilt begrijpen.
 
probeer eens position: abolsute; op de regel erboven te zetten?
 
Example5 zei:
probeer eens position: abolsute; op de regel erboven te zetten?
Klik om te vergroten...

Ik zet nou wel dat ik hetal heb geprobeerd, maar ik weet eigenlijk niet waar je die position: absolute; wil neer zetten

Wordt :
Code: 
.footer p{
text-align:center;
}

dan dit :

Code: 
.footer p{
position: absolute;
text-align:center;
}
 
rikietje zei:
Het werkt nu goed! Het enige probleem is dat de tekst die in het midden geplaatst wordt niet helemaal in het midden staat, kijk maar! http://www.rikbeernink.nl/index.php
Klik om te vergroten...
M'n oplossing was inderdaad toch niet zo goed als ik gedacht had. Probeer het ens met deze CSS.
Code: 
.rechts{
float:right;
width:33%;
text-align:right;
}

.links{
float:left;
width:33%;
text-align:left;
}
 
Misschien ben ik nu heel dom ofzo, maar waarom zou je een <p> gebruiken als je niet het gedrag van een <p> wilt? Kun je niet veel makkelijker een <span> gebruiken? Die heeft dat hele probleem niet :p
 
Ehm, dat maakt bij een float niet uit. Ik zou ook geen {position: absolute;} gebruiken, die geeft meestal meer last dan gemak.
Wat is er aan de hand? Er zijn twéé middens!
  1. Wat er nu gebeurt, is dat de middentekst keurig in het midden staat ... in de overblijvende ruimte tussen de twee floats. En omdat de linker-float meer tekst heeft dan de rechter-float, zit het midden van het overbijvende tussenstuk rechts van het pagina-midden.
  2. Wat je wilt, is dat de middentekst in het midden staat ... van de <body> breedte.
Om tekst tussen twee floats gecentreerd te krijgen op het pagina-midden, kan je twee dingen doen:
  1. De middentekst op een vaste afstand van de linkerkantlijn en de rechterkantlijn zetten, bv. {margin: 0 30%;}. Omdat de floats buiten de "normal flow" (de gewone doorstroming van de html) zitten, maakt de breedte van de floats niets uit: er wordt gerekend vanaf de "echte kantlijn". Nu is de breedte van het middenstuk gecentreerd, en moet alleen ook nog de tekst die er in zit een {text-align: center;} krijgen.
    Variant: alleen een {margin-left: 30%;} geven, plus een {width: 40%;}.

  2. Beide floats dezelfde breedte geven (en de rechter-float een {text-align: right} geven), bv. {width: 30%;}. De middentekst krijgt weer een {text-align: center;}.
    - Dit is hetzelfde als de laatste Naarling-tip (had 'm onafhankelijk bedacht ;)).
Zo krijgen we:
Met vriendelijke groet,
CSShunter
 
Bedankt voor jullie reacties en de duidelijke uitleg van CSSHUNTER


Ik kan hier verder mee!

Ik laat morgen horen wat het geworden is :)
 
Hartelijk bedankt voor de reacties !

De oplossing die naarling en csshunter beschreven waren de juiste!

Ik zal hier even laten zien hoe ik het opgelost heb. (voor de mensen zie hier via zoekmachines belanden)

In de CSS staat nu :
HTML: 
.footer p{
text-align:center;
color:#ffffff;
}

.footer .rechts{
float:right;
width:33%;
text-align:right;
}


.footer .links{
float:left;
width:33%;
text-align:left;
}
}

En op mijn pagina roep ik het alsvolgt aan :



HTML: 
<div class="footer">
<p align="center"> <span class="links">Copyright &copy; 2010 RikBeernink.nl</span> <a href="index.php" class="footer">Home</a> | <a href="contact.php" class="footer">Contact</a> | <a class="footer" href="register.php">Registreren</a> <span class="rechts">All Rights Reserved </span></p>
</div>

<br /><br />
<p align="center">
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>


Hartelijk bedankt voor de super hulp !
 
Mooi-mooi! :thumb:

Nu kan je ook nog even de align="center" uit de html halen, want dat is nu gelukkig overbodige code geworden: het is afgekeurde html. *)

O ja, ik zou de menu-items een pietsie meer speling geven, bv.:
Code: 
.div_menu a {
    margin-right: 10px;
    }
________
*) vindt de html-validator, als je de pagina test als XHTML1.0 Strict. De Transitional-versie was bedoeld om in 1999 nog oude pagina's te kunnen bedienen zonder dat ze in elkaar vielen. Sindsdien zou je de achterhaald ("deprecated") verklaarde html-tags en html-eigenschappen eigenlijk niet meer mogen gebruiken voor nieuwe websites. Als een pagina/site valideert op de Strict-variant, heb je de beste aansluiting bij de actuele standaarden, en de beste cross-browser resultaten. :)
 
Laatst bewerkt:
Is de ruimte die na de p overgeslagen wordt niet margin. Ik heb het probleem ook wel eens gehad en altijd verholpen met margin-(waar je maar wilt)" 0; Dan zou je je oude ding kunnen gebruiken.
 
Hoi Jorryt,
Ja en nee, denk ik.
In het algemeen kan je p {margin: 0; padding: 0;} prima gebruiken om de "blanco regel" tussen twee paragrafen te vermijden.

In dit geval ging het echter niet zozeer om het overslaan van een regel, maar om het op de volgende regel beginnen. D.w.z. een <p>...</p> na een <p>...</p> moet altijd op een volgende regel beginnen, want een <p> is uit zichzelf een "block-element".

Om <p>'s naast elkaar te krijgen, kan je de css-eigenschap {display: inline;} gebruiken. Maar daarmee heb je de ene <p> nog niet aan de linkerkant uitgelijnd, en de andere <p> aan de rechterkant (en dan nog iets ertussen in).

Dat kan weer wel door de float-eigenschap te gebruiken. Met {float: left;} of {float: right;} drijft de <p> weg uit de normale stroom van de pagina, en wordt het block-karakter van de <p> opgeheven. De <p> wordt dan net zo breed als z'n inhoud.

Zo zit dat! :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan