css layout

Status
Niet open voor verdere reacties.
willem008

willem008

Gebruiker
Lid geworden
28 sep 2007
Berichten
792
Goede dag

ik ga nu beginnen met een nieuwe site.
Ik wil deze eens goed aan pakken.
Nou is mij probleem, ik ben er nog steeds niet goed met het kiezen van een layout.
heb al wat gemaakt ik heb nu een hoofdcontainer(relatief gemaakt met met daar in een banner (asoluut) en op de zelde manier wat foto'''s en hyperlinks.
Test hem nu in internet expl FF en opera gaat tot nu goed
Kan iemand mijn simpel uit leggen waarneer het fout kan gaan en hoe ik dat dan met een
bepaalde layout op los'


Of misschien een goede site waar het heel precies uitgelegen wordt.
 
Alleen uit je titel kan ik opmaken dat je overweegt met 'n CSS template te gaan werken.
Zo'n template neemt veel werk uit handen en is prettig werken.
Welk programma gebruik je? Wat zijn je problemen?
 
Ik werk met dreamweaver door zitten veel standaart layout''s in die je kan gebruiken.
zoals 2 kolom 3 kolom elastische enz
Maar ik weet nog niet hoe ik nou precies moet bepaalen welke ik moet kiezen en waarom, en ook de verschillenen heb ik nog niet.
 
Ok, ik werk ook met Dreamweaver (CS3), dus dat maakt het iets makkelijker.

Je kunt voor 'n pure html site kiezen of eentje met CSS.
Wordt het een grote site met regelmatig aanpassingen, dan is wellicht CSS gemakkelijker.
Je verandert iets qua lettertype, kleur of grootte en 't wordt op alle pagina's doorgevoerd (.css).

Die indeling kun je in beide gevallen kiezen. Kijk gewoon welke je 't meest bij je onderwerp vindt passen. Die 3 kolommen met 'n verticale aan de linkerkant vind ik zelf altijd wel mooi en functioneel. Hoe een site visueel overkomt bepaalt ook de gebruiksvriendelijkheid ;)

Met 'n template downloaden ben je natuurlijk 'n stuk verder in ontwikkeling en hoef je alleen maar 'n aantal zaken aan te passen. Deze zijn dan ook geoptimaliseerd, o.a. CSS.
Google maar 'ns op CSS templates en je komt veel tegen dat je gratis kunt downloaden en gebruiken, mits je de onzichtbare verwijzing naar de site van de maker ongemoeid laat.
 
ok tot zover bedankt

Ik ga even wat proberen , maar ben er nog niet helemaal uit.
 
ja ik heb even wat gemaakt voor iemand,ik wil dit voorloppig op het net gaan zetten.
zodat ik rustig een goede ,een goed in elkaar zittende site kan maken(zet er bij deze site is in de maak)
nou is mij vraag wat ik hier gemaakt het met css kan die door de beugel en waar zitten de groote fouten ,
plak hem misschien in tweeen want dat gaat nog wel eens fout.
 
HTML
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">
<link rel="stylesheet" href="style.css" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
</head>

<body bgcolor="#000000">
<div id="hoofdcontainer"></div>
<div id="kop"><p align="center">Hondenschool De Roedel</p></div>
<div id="subkop"><p align="center">"Begrijp uw viervoeter beter."</p></div>
<div id="start">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Start:</div>
<div id="informatie">&nbsp;&nbsp;Informatie:</div>
<div id="nieuwsbrief">&nbsp;Nieuwsbrief:</div>
<div id="introductie">Introductie:</div>
<div id="beleef"><p align="center">Beleef veel plezier met uw hond.</p></div>
<div id="wolf"></div>
<div id="tekstvlak">Mogen wij ons even aan u voorstellen.Onze hondenschool heet,hoe<br />
toepasselijk ook "de Roedel". Net als een troep honden/wolfen, die in<br />vrije natuur leven, ook zo genoemd worden.<br /><br />Wij bestaan in het westland al zo'n 15 jaar.Het eerste stekkie van ons<br />was op de dijkweg in honselersdijk. Nu zijn wij te vinden aan de<br /> Maasdijk in 's-gravenzande. De trainingen zijn zeer praktijkgericht,<br />waardoor ze zeer afwisselend zijn.<br /><br />Uitleg over het hondengedrag staat bij ons hoog in 't vaandel, immers<br />is dat de basis/grondlegging voor een goede band tussen 't baasje en<br />z'n hond.Het is veel leuker en gemakkelijker als je z'n bedoelingen/<br />handelingen begrijpt.Je kunt dan beter op het gedrag inspelen.<br /><br />We trainen honden vanaf 8 weken oud en van allerlei rassoorten, een<br />hond is een hond, ongeacht z'n groote of afkomst.<br /><br />We geven verschillende cursussen en op meerdere dagen. Zoals op<br />zondag als doordeweeks.<br /><br />Het trainen schept een band tussen baas en hond en is bovendien erg<br />leuk om te doen!<br /><br />We hebben verschillende cursussen.<br /><br />Puppy,basis,prive,vuurwerk en theorie honden gedrag.<br />Ook voor honden met probleemgedrag.</div><div id="foto"></div>
<div id="fotokop"></div>
<div id="adres">Wilt u meer weten,dan kunt u ons altijd bellen voor verdere<br />vragen en informatie,telefoon: 01574-21325743/06-5587125485<br />Ron </div>
<div id="route">&nbsp;&nbsp;adres/route:</div>
<div id="foto2"></div>
</body>
</html>
CSS
PHP: 
@charset "utf-8";
/* CSS Document */

#hoofdcontainer {
	background-color: #99CC00;
	position: relative;
	height: 950px;
	width: 950px;
	left: 20px;
	top: 20px;
}
#foto {
	position: absolute;
	height: 121px;
	width: 165px;
	left: 669px;
	top: 423px;
	background-image: url(image/image020-9%5B1%5D.jpg);
}
#fotokop {
	position: absolute;
	height: 106px;
	width: 120px;
	left: 80px;
	top: 70px;
	background-image: url(image/images%5B2%5D.jpg);
}


#start {
	background-color: #000000;
	position: absolute;
	height: 20px;
	width: 75px;
	left: 255px;
	top: 255px;
	font-weight: bolder;
	color: #FFFFFF;
}
#nieuwsbrief {
	background-color: #000000;
	position: absolute;
	height: 20px;
	width: 90px;
	left: 462px;
	top: 255px;
	font-weight: bolder;
	color: #FFFFFF;
}
#route {
	color: #FFFFFF;
	background-color: #000000;
	position: absolute;
	height: 20px;
	width: 100px;
	left: 583px;
	top: 255px;
	font-weight: bold;
}

#kop {
	background-color: #FFFFCC;
	position: absolute;
	height: 105px;
	width: 850px;
	left: 80px;
	top: 70px;
	color: #CC0033;
	font-weight: bolder;
	font-size: 24px;
	text-decoration: underline;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#wolf {
	position: absolute;
	height: 105px;
	width: 120px;
	left: 810px;
	top: 70px;
	background-image: url(image/images%5B1%5D.jpg);
}
#informatie {
	background-color: #000000;
	position: absolute;
	height: 20px;
	width: 88px;
	left: 350px;
	top: 255px;
	color: #FFFFFF;
	font-weight: bold;
}
#adres {
	background-color: #99cc00;
	position: absolute;
	height: 70px;
	width: 400px;
	left: 530px;
	top: 849px;
}



#introductie {
	background-color: #99CC00;
	position: absolute;
	height: 30px;
	width: 125px;
	left: 80px;
	top: 250px;
	font-weight: bolder;
	color: #CC3300;
	font-size: 24px;
	text-decoration: underline;
}
#beleef {
	background-color: #99CC00;
	position: absolute;
	height: 50px;
	width: 800px;
	left: 100px;
	top: 300px;
	font-weight: bolder;
	color: #CC0000;
	font-variant: normal;
	font-size: 36px;
}


#subkop {
	background-color: #FFFFCC;
	position: absolute;
	height: 30px;
	width: 210px;
	left: 400px;
	top: 130px;
	color: #CC0000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}
#tekstvlak {
	background-color: #99CC00;
	position: absolute;
	height: 400px;
	width: 500px;
	left: 78px;
	top: 394px;
}
#foto2 {
	position: absolute;
	height: 120px;
	width: 158px;
	left: 666px;
	top: 639px;
	background-image: url(image/image016-9%5B1%5D.jpg);
}
 
Laatst bewerkt door een moderator:
Ziet er op zich goed uit en is nog overzichtelijk qua hoeveelheid, dus 't lijkt me geen problemen te mogen opleveren.
Je kunt ook de code laten valideren, dan zie je vrij snel of alles ok is.
Ook even publiceren in 'n browser geeft direct ev. bottlenecks bloot.
 
ok alleen nog even dit ,ik test hem in drie browser internet expl-FF en opera en
geeft tot nu toe dezelde weergaven.
met welke eventuele in stellingen van de gebruiker zo het nog fout kunnen gaan
in bedoel resolutie en andere instellingen
en hoe kan in dat in mij css instellen zodat hij dat aanpast.
 
In de CSS hoeft niets veranderd te worden.
'Instellingen van de gebruiker' begrijp ik niet helemaal.
Als het ontwerp in 3 dominante browsers optimaal functioneert, verwacht ik geen plotselinge veranderingen na ingebruikname.
 
Je werkt met:
position: absolute;
hetgeen inhoudt, dat het op een ander beeldscherm formaat wel
eens "verkeerd" getoond kan worden.

Trek de rechterbeeldscherm rand eens iets naar binnen,
en ziet of je rare effecten krijgt.
Ook Ctrl + scrolwieltje (wijziging fonthoogte)
kan wel eens roet in het eten gooien.

:cool:
 
<link rel="stylesheet" href="style.css" type="text/css" />
Klik om te vergroten...

de bovenstaande regel staat bij jou buiten je <head></head>
maar die moet binnen je head staan, bijvoorbeeld direct boven title.
Je kan je html ook altijd even controleren via www.w3c.org dan moet je daar kiezen voor html validator en dan je code plakken of je html bestand uploaden.

Het kan goed helpen om html fouten er uit te halen. Dat is vaak een reden waarom een website niet goed getoond.
Als je code valide is (dus als er geen fouten meer inzitten) heb je meer zekerheid dat het in andere browsers ook getoond wordt zoals jij het ziet.
Voor de rest zou ik zoveel mogelijk van mijn opmaak inderdaad in je css houden. je hebt je achteregrond kleur nu in je html gedaan, maar dit kan ook gewoon in je css (dat is eigenlijk beter) met de volgende code:

body {
background-color : #000000;
}
 
ok heb de pagina even getest
daar geeft hij 6 erros
en allemaal met de afsluiting >

en wel bij de link naar mijn stylesheet
en bij de head
en bg 000000>
en ook nog bij de <html>
overal is het afsluitings > rood getoont
wat wil dat zeggen
 
Als je dit ervan maakt:
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
is het goed.

:cool:
 
Stond buiten de <head> tag, na aanpassing binnen de tag
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan