website layout

Status
Niet open voor verdere reacties.
G

Gimler

Gebruiker
Lid geworden
22 nov 2011
Berichten
8
Beste,

Ik ben bezig met het maken van een splash pagina om te verwijzen naar mij eigen portfolio en een aantal portfolio's van mijn mede studenten. Het ontwerp daarvan heb ik toegevoegd in de bijlage: portfolio_splash_voorbeeld.jpg
In de stukjes code hieronder is te zien hoe ik het tot nu toe in CSS en HTML getracht heb in elkaar te zetten. Ik stuit alleen op het probleem dat het op mijn beeldscherm (1680 x 1050) er goed uitziet,
maar zodra de resolutie kleiner wordt schuift alles in elkaar. Heb al vanalles geprobeerd maar mijn minimale kennis van CSS laat me hier toch in de steek ben ik bang..

Is er iemand die me een beetje verder op weg kan helpen?

Alvast bedankt.

Gimler

Code: 
@charset "utf-8";
/* CSS Document */

body {
font-family: Arial, Helvetica, sans-serif;
background: #ebf7f8 bottom left fixed repeat-x url(images/footer.jpg);
}

#wrapper {

	position: relative;
	left: 40%;
	width: 910px;
	margin-left: -455px;
}

.piet {
	display: block;
	position: absolute;
	left: 150px;
	top: 250px;
	width: 150px;
	height: 407px;
	background: url(images/piet.jpg) bottom;
	text-indent: -99999px;
}

.piet:hover {
	background-position: 0 0;
}

.hein {
	display: block;
	position: absolute;
	left: 330px;
	top: 200px;
	width: 150px;
	height: 407px;
	background: url(images/hein.jpg) bottom;
	text-indent: -99999px;
}

.hein:hover {
	background-position: 0 0;
}

.klaas {
	display: block;
	position: absolute;
	left: 510px;
	top: 150px;
	width: 150px;
	height: 407px;
	background: url(images/klaas.jpg) bottom;
	text-indent: -99999px;
}

.klaas:hover {
	background-position: 0 0;
}

.henk {
	display: block;
	position: absolute;
	left: 690px;
	top: 100px;
	width: 150px;
	height: 407px;
	background: url(images/henk.jpg) bottom;
	text-indent: -99999px;
}

.henk:hover {
	background-position: 0 0;
}

.kees {
	display: block;
	position: absolute;
	left: 870px;
	top: 50px;
	width: 150px;
	height: 407px;
	background: url(images/kees.jpg) bottom;
	text-indent: -99999px;
}

.kees:hover {
	background-position: 0 0;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titel</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<a class="piet" href="http://www.google.nl" target="_blank">Test</a>
<a class="hein" href="http://www.google.nl">Test</a>
<a class="klaas" href="http://www.google.nl">Test</a>
<a class="henk" href="http://www.google.nl">Test</a>
<a class="kees" href="http://www.google.nl">Test</a>
</div>
</body>
</html>
 
Laatst bewerkt:
Hoi Gimler,
Op kleiner dan 1680px beeldscherm-breedte zie ik 'm horizontaal niet in elkaar schuiven.
De zijkanten links en rechts worden kleiner, maar de pagina blijft wel gecentreerd (bijna, vanwege de 40% ipv 50%; en omdat de 5 trappertjes-heren met hun margin-left niet in de #wrapper-breedte passen.
Te bezien met:
Code: 
#wrapper {
    ...
    height: 500px;
    border: 1px dotted fuchsia;
    }

Ik zie 'm verticaal wel in elkaar schuiven.
Bij kleinere resoluties stijgt het waterpeil, en komt de footer achter de kolommetjes te liggen.
Dat zit 'm in de fixed background van de <body>: dan staat de footer altijd op de onderrand van het scherm, welke resolutie je ook hebt.

Als je de footer altijd onderaan wilt hebben als het scherm hoog genoeg is, maar bij een kleine resolutie ook altijd onder de kolommen (met scrollen om alles te zien), kan je hier en op de volgende pagina's eens kijken:

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Bedankt voor je hulp zover! Het is echter nog niet gelukt. Ik heb de aanwijzingen op de pagina die je gaf gevolgd, maar ik kreeg helaas niet hetzelfde resultaat. Het water schuift nog steeds achter de kolommen.

Overigens moest ik de top: ..px van de kolommen ook aanpassen omdat anders de helft verdween. (zelfs met de padding-top in de content div) Misschien dat het daardoor verkeerd gaat?
Via deze website ben ik trouwens op het idee gekomen, misschien dat dat helpt.

Alvast bedankt!

Gimler

Code: 
@charset "utf-8";
/* CSS Document */

html {
	height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #ebf7f8 bottom left fixed repeat-x url(images/footer.jpg);
	height: 100%;
}

#wrapper {
	position: relative;
	left: 50%;
	width: 910px;
	margin-left: -455px;
	min-height: 100%;
	margin-top: -175px;
}

#content {
	padding-top: 175px;
}
	
.piet {
	display: block;
	position: absolute;
	top: 389px;
	width: 150px;
	height: 407px;
	background: url(images/piet.jpg) bottom;
	text-indent: -99999px;
}

.piet:hover {
	background-position: 0 0;
}

.hein {
	display: block;
	position: absolute;
	left: 180px;
	top: 339px;
	width: 150px;
	height: 407px;
	background: url(images/hein.jpg) bottom;
	text-indent: -99999px;
}

.hein:hover {
	background-position: 0 0;
}

.klaas {
	display: block;
	position: absolute;
	left: 360px;
	top: 289px;
	width: 150px;
	height: 407px;
	background: url(images/klaas.jpg) bottom;
	text-indent: -99999px;
}

.klaas:hover {
	background-position: 0 0;
}

.henk {
	display: block;
	position: absolute;
	left: 540px;
	top: 239px;
	width: 150px;
	height: 407px;
	background: url(images/henk.jpg) bottom;
	text-indent: -99999px;
}

.henk:hover {
	background-position: 0 0;
}

.kees {
	display: block;
	position: absolute;
	left: 720px;
	top: 189px;
	width: 150px;
	height: 407px;
	background: url(images/kees.jpg) bottom;
	text-indent: -99999px;
}

.kees:hover {
	background-position: 0 0;
}

#footer {
	height: 175px;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titel</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
	<div id="content">
		<a class="piet" href="http://www.google.nl" target="_blank">Test</a>
		<a class="hein" href="http://www.google.nl">Test</a>
		<a class="klaas" href="http://www.google.nl">Test</a>
		<a class="henk" href="http://www.google.nl">Test</a>
		<a class="kees" href="http://www.google.nl">Test</a>
	</div>
</div>

<div id="footer">
</div>

</body>
</html>
 
Ah, I see!
Het recept is niet voor de volle 100% gevolgd, en dat geeft nattigheid:
  • De golfjes zitten nog in de <body> met een fixed positie.
  • De #wrapper heeft een relative positie, de #content niet, en de 5 heren staan met een absolute positie op de pagina > dan zitten ze "absoluut" (zonder elkaar te beïnvloeden) vastgespijkerd aan het eerstbovenliggende element met een relatieve positie, dwz aan de #wrapper ipv aan de #content waar ze in thuis horen.
  • De footer-background hoort in de ... #footer!

Het beste is om de absolute posities van de heren te schrapen.
  • Ze kunnen beter naast elkaar gezet worden met de float-eigenschap. Dan drijven ze naast elkaar met afstanden die met margins geregeld kunnen worden. Dat zijn dan de margins tov de #content voor de margin-top van elk element; en als het {float: left;} wordt: de eerste margin-left tov. de ,linkerkant van de #content, en de volgende margins L/R tov elkaar.
  • De volgende float drijft steeds aansluitend naar links met de opgegeven margin als tussenruimte.
  • Onder de 5 floats komt een element met een clear voor het opschonen: waarmee de erna volgende zaken niet naast de floats komen voor zover daar nog plek is, maar er onder.
  • Dat wordt benut om wat extra tussenruimte te creëren tussen de onderkant van de laagste heer, Piet, en de bovenkant van de golfjes van de footer.
  • Dan houdt Piet bij weinig beeldscherm-hoogte ook als het stormt altijd droge voeten. ;)

Tenslotte kan voor de inhoud van de #footer een padding-top opgegeven worden, zodat de tekst niet dwars door de toppen van de golven gaat, maar er onder komt te staan. Omdat in het css box-model een padding altijd wordt opgeteld bij de hoogte van een element, moet de hoogte van de footer verminderd worden met het aantal pixels dat die padding hoog is.



Is dat beter?

Met vriendelijke groet,
CSShunter
 
Kijk, zo komen we ergens! :) Super bedankt! Grappig dat je het thema bij water houdt, mijn opleiding heeft daar namelijk ook mee te maken. In ieder geval een teken dat het ontwerp helder naar water verwijst. :)

De huidige versie heb ik via onderstaande code in elkaar gezet. Inclusief het logo, rule en stukje tekst in de footer. Het enige waar ik nu een beetje mee zit zijn de namen onder de banners.
Ik dacht dat die ook met div's moesten met het pijltje als background en de naam zelf in h1 in het html bestand. Op die manier kwam ik echter in de problemen met de rest van de banners?

Gimler

Code: 
@charset "utf-8";
/* CSS Document */

html {
	height: 100%;
}

body {
	font: bold 0.75em Georgia, serif;
	color: #ffffff;
	background: #ebf7f8;
	height: 100%;
	margin: 0;
}

h3 {
	font-size: 1.5em;
}	

#wrapper {
	width: 910px;
	margin: -175px auto 0 auto;
	min-height: 100%;
}

#content {
	padding-top: 175px;
}
	
.piet {
	float: left;
	width: 150px;
	height: 407px;
	display: block;
	margin: 220px 30px 0 15px;
	background: url(images/piet.jpg) bottom;
	text-indent: -99999px;
}

.piet:hover {
	background-position: 0 0;
}

.hein {
	float: left;
	width: 150px;
	height: 407px;
	display: block;
	margin: 170px 30px 0 0;
	background: url(images/hein.jpg) bottom;
	text-indent: -99999px;
}

hein:hover {
	background-position: 0 0;
}

.klaas {
	float: left;
	width: 150px;
	height: 407px;
	display: block;
	margin: 120px 30px 0 0;
	background: url(images/klaas.jpg) bottom;
	text-indent: -99999px;
}

.klaas:hover {
	background-position: 0 0;
}

.henk {
	float: left;
	width: 150px;
	height: 407px;
	display: block;
	margin: 70px 30px 0 0;
	background: url(images/henk.jpg) bottom;
	text-indent: -99999px;
}

.henk:hover {
	background-position: 0 0;
}

.kees {
	float: left;
	width: 150px;
	height: 407px;
	display: block;
	margin: 20px 0 0 0;
	background: url(images/kees.jpg) bottom;
	text-indent: -99999px;
}

.kees:hover {
	background-position: 0 0;
}

#footerdistance {
	clear: both;
	height: 20px;
}

#footer {
	height: 150px;
	padding-top: 25px;
	background: url(images/footer.jpg) repeat-x bottom left;
}

#footer-wrapper {
	width: 910px;
	margin: auto;
	min-height: 100%;
}

#footer-about {
	float: left;
	width: 370px;
	margin-left: 15px;
} 

#footer-logo {
	float: left;
	width: 208px;
	height: 70px;
	margin: 45px 0 0 300px;
	background: url(images/logo.png);
}

#footer-rule {
	clear: both;
	height: 1px;
	margin: 0 0 5px 0;
	background: url(images/rule.png) center repeat-x;
	
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
	<div id="content">
		<a class="piet" href="http://www.google.nl" target="_blank">Test</a>
		<a class="hein" href="http://www.google.nl">Test</a>
		<a class="klaas" href="http://www.google.nl">Test</a>
		<a class="henk" href="http://www.google.nl">Test</a>
		<a class="kees" href="http://www.google.nl">Test</a>
		<div id="footerdistance"></div>
	</div>
</div>

<div id="footer">
	<div id="footer-wrapper">
		<div id="footer-about">
			<h3>Wat is hier te vinden?</h3>
			<p>tekst</p>
		</div>
		<div id="footer-logo"></div>
		<div id="footer-rule"></div>
	</div>
</div>

</body>
</html>
 
Hoi Gimler,
Voor de namen onder de banner-kolommetjes kan je inderdaad een <h1> gebruiken (ik zou een <h2> nemen, en de websitenaam in een [al of niet verborgen] <h1> zetten): dan moeten de styles van de <a>'s erbinnen gedeeltelijk worden overgeheveld naar die <h>'s. En om de tekst binnen de <a>'s moet dan een <span> komen, met een padding-left waarin het pijltje als background-img past.

Maar makkelijker en mooier (in de uitlijning) is, om de namen inclusief de pijltjes gewoon op te nemen in de banner-images. :)
Ook dan moeten de <h>-styles deels losgetrokken worden van de <a>'s, maar het wordt een stuk overzichtelijker. De teksten in de <a>'s en hun negatieve text-indent kunnen dan blijven bestaan: dat is prima voor pure text-browsers en Google.

De hover-varianten heb je nu in een gecombineerd image voor elke banner apart.
  • Omdat de banner-images background-images zijn en niet verder komen de de breedte van hun element (de <a>'s), kunnen ze ook nog naast elkaar geplakt worden in 1 grote banner-combi.
  • En onderaan kan de 1px hoge afbeelding van de "footer-rule" komen.
  • Welk deel van de afbeelding gebruikt wordt, kan steeds geregeld worden met de background-position.
  • Zo spaar je het bij de server moeten opvragen (en downloaden) van 5 images = snelheidswinst voor de pagina.
  • En het combi-img is wegens de overhead die in een img zit (= een eigen "header" die je niet ziet, maar in het img-bestand zit ingesloten met o.a. gegevens over type bestand, maten, aanmaak-datum e.d.), even adem halen, ook kleiner dan de 6 losse onderdelen = ook weer snelheidswinst.

O ja (1)
De pagina-breedte staat nu op 910px, om er vervolgens met een margin-L aan de zijkant weer 15px van af te knabbelen bij "Piet". Dan kan de #wrapper net zo goed meteen de breedte van 870px worden die alles aan banners bij elkaar is.

O ja (2)
Als je de target="_blank" voor de links er uit haalt (je blijft bij de links toch op je eigen site, er hoeft geen nieuw browser-tabblad te openen), dan kan het Doctype mooi xhtml-Strict ipv Transitional worden = ook erg aanbevolen.

O ja (3)
Er kan een a:focus worden toegevoegd bij de hovers; dan kunnen mensen die de Tab-toets gebruiken om van link naar link op de pagina te gaan, ook genieten van de hover-afbeeldingen.

=======

Met vriendelijke groet,
CSShunter
 
Het is gelukt! :)

Bedankt voor al je hulp! Hoop geleerd via dit topic.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan