http://www.logopedia.be/css/nieuwsbrief.html
Om een of andere reden werkt het beest echter niet.
Ik heb een heel basic html pagina'tje gemaakt (3 simpele divjes 1 met top image 1 met bg image 1 px en repeat y en 1 bottom image div)
Het werkt wel maar...
de bg image die moet worden gerepeat loopt gewoon verder ook ONDER de bottom image?
Ik zie allicht iets onnozel over het hoofd?
de code van zowel de css als de html pagina zijn gewoon via bron weergeven te bezichtigen.
Zet bij zowel [b]#frame_top[/b] als [b]#frame_bottom[/b] in de css.
[code]background-repeat: no-repeat;[/code]
Meer nadenken, minder roepen.
zo?! dat hielp ! Bedankt...
Waarom helpt dat precies? Wat is het achterliggende idee daarvan?
Nou hoe je niet direct 4 keer dezelfde code in je pagina te zetten :
http://www.logopedia.be/css/nieuwsbrief.html
[code]<div id="frame_top"></div>
<div id="frame"></div>
<div id="frame_bottom"></div>[/code]
Wyodor? slechte dag gehad?
Ik vroeg gewoon waarom die no-repeat erbij moest? Je hebt me geholpen, waarvoor dank. Maar ik begrijp niet goed waarom.
En ik zet 4 keer die code er omdat ik dat frame 4 keer nodig heb :lol:
Gevoelige mensen hier.
@steene
in css heb je classes en je hebt id's
een id geef je aan met " # " deze mag maar 1 keer voorkomen in de pagina.
een class geef je aan met " . " deze mag vaker voorkomen.
Daarnaast zijn het allemaal divs, dus je hoeft niet elke keer de zelfde properties mee tegeven.
Doe je het onderstaande, zullen al je div's 902px breed en gecentreerd staan.
div {
width: 902px;
margin: 0 auto;
}
[quote=Wyodor url=http://www.onemorething.nl/community/topic/iets-heel-simpel-in-css#post-2206470 time=1303320293]Gevoelige mensen hier.[/quote] :-)
ik ben niet zo gevoelig hoor :-)
Mag ik nog es wat vragen?
Ik heb een div class namelijk title in de div frame top geplaatst.
Alles prima...
Margin-left werkt prima
margin-top verplaatst de hele boel.
Ik wil gewoon mijn title wat beter plaatsen maar alles verplaats zoveel pixel mee van boven de pagina?
Ah zo dus ik vul dit in in mijn css
div {
width: 902px;
margin: 0 auto;
}
En dan geeft ie automatisch alles wat een div is 902 px maar niet alles divs horen 902 px te zijn :-)
waarschijnlijk heeft dat te maken met absolute en relative positionering?
Maar wat moet ik dan precies doen om mijn title x aantal pixels van frame top te laten zakken en niet de hele pagina de margin's te veranderen?
[quote=steene url=http://www.onemorething.nl/community/topic/iets-heel-simpel-in-css#post-2206477 time=1303321368]En dan geeft ie automatisch alles wat een div is 902 px maar niet alles divs horen 902 px te zijn :-)[/quote]Klopt wel, dat is namelijk precies wat je aangeeft; elke div element is nu 902px breed. Daarom kun je gebruik maken van id's en classes. Geef de div die 902px moet zijn een id mee, bijvoorbeeld id="top" dan in je css:
[code]
#top{
width: 902px;
margin: 0 auto;
}
[/code]
Ik raad je ook aan om eens op w3schools.com te kijken, hier staan alle html en css elementen goed uitgelegd. Daar kun je nog een hoop leren denk ik. :)
ik twijfel er niet aan dat ik nog veel moet leren :-)
Gerwinbosscha,
Heb je enig idee hoe ik die titel die binnen de div frame_top zit verwerkt kan positioneren (lees 5 pixels van de bovenkant laten zakken?)
Niet verkeerd bedoeld hoor, gewoon een tip ;)
Die titel kun je laten zakken door padding te gebruiken, dus zo:
[code]
#frame_top{
padding-top: 5px;
}
[/code] Misschien moet je de hoogte van dit element dan even verlagen met het aantal px dat je in de padding gebruikt, anders valt de lay-out uit elkaar, maar dat weet ik niet zeker.
oké doe ik, bedankt hoor!
Mag ik hier nog eens 'storen'?
Hoe bepaal ik de witruimte tussen alle kaders?
@steene, misschien moet je eens een avond of 2 spenderen aan het leren van css. Gewoon lezen en aantekeningetjes maken of hoe jij het makkelijkste leert.
[quote=steene url=http://www.onemorething.nl/community/topic/iets-heel-simpel-in-css#post-2206526 time=1303337747]Hoe bepaal ik de witruimte tussen alle kaders?[/quote]Dat kun je doen met margin. Maar inderdaad, wat martijnG zegt, even wat tijd uittrekken om je te verdiepen in css kan geen kwaad.
Je hebt het bestand nieuwsbrief genoemd als ik er daardoor vanuit ga dat je dit gaat gebruiken voor een html mail let dan goed op dat veel css eigenschappen in html mails niet of slecht ondersteund worden waardoor je voor website's en email's een andere opzet nodig hebt.
Kijk voor een overzicht van wat wel en niet [url=http://www.campaignmonitor.com/css/]hier even[/url]
hier een voorbeeld hoe het ook kan,
In dit voorbeeld zijn HTML tags gebruikt die beter bij de content passen.
h1 belangrijkste header
h3 minder belangrijke header
p voor paragraaf
a in de header ook te gebruiken als home button
de h1 bevat text zodat zoekmachines en mensen die geen plaatjes downloaden ook weten waar het over gaat.
wrapper: om alles te centreren, had ook met de body tag gekunt, aangezien deze binnen de html tag valt.
Dn dan de divjes om de secties te scheiden.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Logopedia nieuwsbrief2</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
font-family: "Arial",verdana,Sans-Serif;
}
div#wrapper
{
width: 902px;
position: relatvie;
margin: 0 auto;
}
div#wrapper > h1
{
background: url('http://www.logopedia.be/css/images/logopedia-header.png') no-repeat;
height: 120px;
width: 902px;
margin: 20px 0;
}
div#wrapper > h1 > a
{
background: url('http://www.logopedia.be/css/images/logo.png') no-repeat;
display: block;
height: 114px;
width: 158px;
text-indent: -5000px;
margin: 0 0 0 20px;
}
div#wrapper > div {
background: url('http://www.logopedia.be/css/images/frame_bottom.png') no-repeat center bottom;
padding: 0 0 14px 0;
margin: 0 0 20px 0;
}
div#wrapper > div > h3 {
background: url('http://www.logopedia.be/css/images/frame_top.png') no-repeat;
color: #FFF;
height: 30px;
line-height: 30px;
padding: 0 20px;
}
div#wrapper > div > p {
background: url('http://www.logopedia.be/css/images/frame_bg.png') repeat-y;
padding: 5px 20px 0 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>
Logo Pedia
</h1>
<div>
<h3>NIEUWSBRIEF INFO</h3>
<p>Some text</p>
</div>
<div>
<h3>NIEUWSBRIEF INFO</h3>
<p>Some text</p>
</div>
<div>
<h3>NIEUWSBRIEF INFO</h3>
<p>Some text</p>
</div>
</div>
</body>
</html>
helemaal waar, dan is er nog dat probleem! ik geef het op.
Ik ga alles in afbeeldingen zetten en die afbeeldingen gewoon aligneren. En dat versturen als nieuwsbrief...
toch bedankt voor hulpe