Lengte site moeilijk vast te zette.

Status
Niet open voor verdere reacties.
M

marc 05

Gebruiker
Lid geworden
5 sep 2006
Berichten
227
Ik kan de lengte van de site moeilijk vast zetten...zie stuk van onderstaande html:



HTML: 
<div id="wrapper">

	<div id="menu">
	        Hierin staat mijn menu 
   </div>
  

 
		<div id="content">  
  
                                           Hier staat mijn content
	
		</div>

	
</div>
		
	

 <div class="style1" id="footer">Footer</div>


De footer staat buiten de wrapper en blijft onderaan de balk staan... het is de bedoeling dat de pagina achter de footer uitkomt. De scrolbar moet orgineel blijven aan de rechterkant.


Hetgeen waar ik tegenaan loop is dat wanneer ik de wrapper net boven de footer vastzet....met bottom 15 b.v. dit wel gaat totdat ik het venster groter of kleiner ga maken.
heb ook geprobeerd een height te gegeven aan de wrapper... maar dan scroll je een heel stuk lege pagina. Zet ik height op 100% stopt deze dus na hetgeen erin staat aan tekst/foto`s.




De volgende CSS


Code: 
body { 
width: 990px;
margin : 0 auto; 
padding: 0 ; 
background:#000000; 
color : white; 
font-family:Helvetica, sans-serif; 
}

#menu {
width: 100%;
height: 40px;
background: #FFFFFF;
padding: 0px;
margin: 0px;
}

#wrapper{
position : absolute;
width: 990px;
background:#000000;
top: 85px;
border: solid #FAFAE0;
border-width: 0 0 0 2px;
height:1000px
}


#content{
padding: 10px 10px 10px 20px;

}


#footer{
position: fixed;
bottom: 0px;
height: 15px;
width: 990px;
background:#000000
 
Laatst bewerkt:
Als ik onderstaande link volg de korte pagina is de border maar heel kort. Is het in de korte pagina evengoed te realiseren de border door te laten lopen net zoals in de lange

http://www.developerscorner.nl/csshunter/tests/fixed-footer-A.htm


Verder staat in de css


Code: 
html {
	background: black;
	height: 100%;        /* ook referentie voor body-hoogte */
	padding-bottom: 1px; /* voor FF en Chrome */
	}


Wat regelt de bottom hoogte hier of liever gezegd wat gebeurt er als deze er niet in staat?



Verder heb ik nog een vraag over de css van de onderstaande link:

http://developerscorner.nl/csshunter/tests/gecentreerde-footer-A.htm


font-size: 100.1%; /* normaliseren voor alle browsers, ook IE! */


Kunje mij uitleggen waarom hier gekozen is voor 100.1% en moet die font-size altijd in de body gezet worden?

Of is dat alleen maar wanneer je meerder hoogtes voor tekst wil vastleggen in je hele pagina - bedoel hoogte b.v. voor:
P, H1, H2, enzv.
 
Hoi Marc,
Is het in de korte pagina evengoed te realiseren de border door te laten lopen net zoals in de lange?
Klik om te vergroten...
Jazeker, met css kan alles. :)
Dan...
  • ... geef je de border aan de <body>;
  • ... zet je bovenin een #header, zal toch al de bedoeling zijn;
  • ... schrap je de hele #wrapper, want die is niet meer nodig;
  • ... ga je wat spelen met een negatieve linkermarge voor #header en #footer,
    om daar de border te verdonkeremanen.
Resultaat:
=====
html { height: 100%; padding-bottom: 1px;}

Wat regelt de bottom hoogte hier of liever gezegd wat gebeurt er als deze er niet in staat?
Klik om te vergroten...
Die ene px zorgt er (samen met de 100% hoogte) voor, dat de rechter scrollbar altijd 1px omhoog moet kunnen. > Er moet dus een rechter scrollbar zijn.
Als de hoogte 100% of kleiner is, tonen Firefox en Chrome standaard géén rechter scrollbar, maar reserveren daar ook geen ruimte voor!
Zou betekenen: het midden van de (gecentreerde) pagina verspringt als je wisselt tussen een korte pagina (die geen scrollbar nodig heeft) en een lange (die 'm wel nodig heeft).
Dus door de 1px wordt de scrollbar geforceerd (cq. de ruimte ervoor bij een korte pagina gereserveerd).

=====
body { font-size: 100.1%; } /* normaliseren voor alle browsers, ook IE! */

Kun je mij uitleggen waarom hier gekozen is voor 100.1% en moet die font-size altijd in de body gezet worden?
Klik om te vergroten...
Als volgt:
  • Normaal gesproken zou 100% de default-waarde moeten zijn, en niet vermeld hoeven te worden.
  • Maar als je geen expliciete font-size in de <body> opneemt, geeft Internet Explorer (in elke geval de oudere versies) veel te veel verschil in lettergrootte als je als bezoeker via het IE-menu: Beeld > Tekengrootte het letterformaat gaat wijzigen. De sprongen tussen de 5 opties (van Extra klein naar Extra groot) worden dan veel te groot.
  • Het melden van 100% zou afdoende moeten zijn voor IE, maar met 100% had Opera indertijd moeite. Met die 1/10% extra was dat van de baan. Of dat nog steeds zo is, heb ik nooit uitgezocht: voor de veiligheid laat ik het er in staan, kan nooit kwaad.
  • Het beste is dus om die 100.1% altijd in de <body> op te nemen, ook als je de verdere lettergroottes van de <h1> ... <p> niet gaat aanpassen.
  • (en als je dat gaat doen, altijd in em's en niet in px; anders kunnen IE-genieters nog niet het formaat van hun behoefte instellen via menu: Beeld > Tekengrootte.)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo csshunter,

Waarom staat in onderstaand voorbeeld in de body de position de waarde op relative


http://developerscorner.nl/csshunter/tests/gecentreerde-footer-A.htm


verder had ik nog een vraag wat de indeling betreft, lengte lukt wel nu, maar hoe de plaatjes of tekst te plaatsen.


b.v.

Code: 
		<div id="content"><P>
<img class="floatR" src="bewerkt/voorbeeld.jpg" width="300" height="225" alt="voorbeeld">De tekst uit dit  voorbeeld moet dan links naast het plaatje komen en zo mee naar beneden naast het plaatje</P

</div>

Maar nu wil hieronder hetzelfde maar dan het plaatje aan de linkerkant, als ik dit doe en geen <br> of <p>&nbsp</P> plaats dan staan de plaatjes naast mekaar.

De CSS hiervoor had ik.

Code: 
.floatL { 
float : left;
margin-right: 100px;
margin-left: 25px;
margin-top: 20px;
} 

.floatR { 
float : right;
margin-right: 20px;
margin-top: 20px;
}

Ik wil dit juist iets lager en mooi de ene keer links en de andere keer rechts naast het plaatje.

Is dit eventueel ook te maken met 2 <div> naast mekaar, en hoe krijg ik de tweede <div> ernaast?
 
Waarom staat in onderstaand voorbeeld in de body de position de waarde op relative?
Klik om te vergroten...
Haal maar eens weg, en kijk wat er gebeurt! :)

Voor de indeling met floats moet je misschien even het hoofstukje daarover (of ook de rest) in de cursus html van webgarden.be lezen en beproeven.

Kom je er daarmee niet uit, dan graag even link naar een testpagina met wat je al hebt, en een tekeningetje van hoe je het precies wilt hebben.

Met vriendelijke groet,
CSShunter
 
Waarom staat in onderstaand voorbeeld in de body de position de waarde op relative?
Haal maar eens weg, en kijk wat er gebeurt!
Klik om te vergroten...

als ik relative weghaal gebeurt er niets hier, wel als ik het verander in absolute.


Dit was de pagina zoals ik hem voorheen al had. Er staat rechts een plaatje....en links tekst. Nu is mijn bedoeling dus tekst te zetten in de volgende alinea aan de rechterkant en de plaatjes links. Helaas kan ik hier even geen tekening van maken. Hoop dat je begrijpt wat ik bedoel. Meen dit eerder ergens gelezen te hebben maar kan het niet meer vinden. Het kon geloof ik met clear van de div.

http://www.digitreport.com/index3.php


Groeten, Marc
 
Laatst bewerkt:
Hoi Marc,
als ik relative weghaal gebeurt er niets hier, wel als ik het verander in absolute.
Klik om te vergroten...
Ah, maar dat kan helemaal kloppen. Deze pagina index3.php heeft helemaal niet de structuur met een fixed footer zoals in fixed-footer-A2.htm.
Er is zelfs helemaal geen #footer! ;)
Of lopen er hier twee vragen door elkaar?

In elk geval: op de index3-pagina is er maar één plaatje met de twee automobielen. Dan is het wat moeilijk om de ene links en de andere rechts te krijgen (tenzij je er een achtergrond-image van gaat maken of gaat "clippen", maar dat is wat gedoe en hier niet persé nodig).
Het eerste wat moet gebeuren is dus de twee plaatjes losknippen en er img1.jpg en img2.jpg van maken.
Nu kan je ze om en om links en rechts zetten met (als er 3 zijn):
HTML: 
...
<p><img class="floatR" src="images/img1.jpg" width="220" height="164" alt="">
Tekst die naast dit rechts geplaatste img1 moet komen.</p>

<p class="clearR"><img class="floatL" src="images/img2.jpg" width="220" height="164" alt="">
Tekst die naast dit links geplaatste img2 moet komen.</p>
<p>Volgende alinea met tekst voor naast img2.</p>

<p class="clearL"><img class="floatR" src="images/img3.jpg" width="220" height="164" alt="">
Tekst die naast dit rechts geplaatste img3 moet komen.</p>

enz.
Met als css:
Code: 
floatR {
    float: right;
    margin-left: 20px; /* afstand tot de tekst ernaast */
    }
floatL {
    float: left;
    margin-right: 20px; /* afstand tot de tekst ernaast */
    }
clearR {
    clear: right; /* pas doorgaan onder de float-right */
    }
clearL {
    clear: left; /* pas doorgaan onder de float-left */
    }
Als je zoveel tekst hebt dat die onder de afbeelding door gaat lopen (dat gebeurt standaard), kan je de tekst ook in een strakke kolom naast de afbeelding willen houden.
Dat gaat dan door de <p> met een class="textLinks" een margin-right te geven van iets meer dan de breedte van een afbeelding, en een class="textRechts" een margin-left van dezelfde breedte (bij even grote afbeelding-breedte; anders moet het stuk voor stuk met een id).
De margin-right resp. margin-left van de floats kan dan komen te vervallen.

Met vriendelijke groet,
CSShunter
 
Hallo csshunter,



wat de link betreft is dit even een misverstand :) ik bedoelde dus jou voorbeeld:

http://developerscorner.nl/csshunter/tests/gecentreerde-footer-A.htm

Als ik hier relative weglaat zie ik dus geen verschil.... ik wou op deze manier een subpagina aanmaken in mijn secure gedeelte van mijn eigen pagina. probeerde te begrijpen waarom gekozen was voor relative. Als ik deze uischakel blijft toch alles mooi in het midden en zag niet direct verschil.

Verder kan ik wel eens aan de slag met het plaatsen van plaatjes met floarR en floatL


Goeten, Marc
 
Ah, I see.
Bij de pagina www.developerscorner.nl/csshunter/tests/gecentreerde-footer-A.htm maakt het inderdaad geen verschil, als je de body{position:relative;} weglaat.

Maar ... dit speelt wel een rol bij dezelfde pagina met veel tekst.
Als je in deze pagina (www.developerscorner.nl/csshunter/tests/gecentreerde-footer-B.htm) de body{position:relative;} weglaat, is er wel verschil:

footer-scroll.png

Bij opening staat de footer keurig onderaan, maar als je gaat scrollen, scrolt de footer mee omhoog.
Zodoende!

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

Nieuwste berichten

Terug
Bovenaan Onderaan