Archief - HTML/CSS: Achtegrond afbeelding.

Microwaver · 19 okt 2006

Ik had (weeral) eens een vraag.
Ik was hier een beetje bezig met een mail lay-out.

En daar heb'k een header, middengedeelte en een footer.

In de header staat een achtegrondafbeelding waarom men de titel altijd kan veranderen,
In de footer staat een gewone afbeelding met verschillende imagemaps.
In het middengedeelte (laten we het center noemen) sis er een veld met een achtergrond afbeelding.

Nu was mijn vraag. Hoe kan ik er voor zorgen, hoe lang en hoog de tekst in het midden ook word. Hoe kan ik deze afbeelding NET boven de footer laten blijven (ok. niet al te correct nederlands).
en als ik de lengte van het middengedeelte aanpas. veranderden de image maps dan niet van plaats? ik dacht van niet. maar ben niet 100% zeker.

Gegroet

omfg · 19 okt 2006

ik begrijp niet echt helemaal wat je bedoelt, maar als je je achtergrondafbeelding in je 'center' div (ik veronderstel dat je divs gebruikt?) gewoon een background-position: bottom; meegeeft zou deze onderaan moeten blijven en dus vlak boven je footer komen...
mss kan je ons een link geven dat we kunnen zien hoe je het wil?

grtz

Microwaver · 19 okt 2006

Ok. ik ga er morgen of vanavond nog een beetje aan werken en zal'k zeker tegen vrijdag iets posten dat deze, eigenlijk toch vrij onduidelijke vraag, een beetje onderbouwd.

AL bedankt voor je uitleg.

Microwaver · 19 okt 2006

Ok ik heb nu iets maar zit nog altijd met een vraagje.

het ziet eruit zoals het moet. maar in het middne lukt het enkel als'k genoeg tekst in het vakje zet.

Als de tekst nie kleiner is dan de Fc dan krijg'k de volledige afbeelding nog niet te zien

hoe los ik dit op?

Ook iet er iets mis met die header. daar wordt de div breder naarmate ik padding toevoeg, dit kan toch ook niet de bedoeling zijn?
wat als ik nu rond dat geheel een border wil zetten?

http://users.telenet.be/DeTrekBeiren/email/untitled.html

de html

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>

<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="center">
<div id="header"><h1>[slogan]</h1></div>
<div id="middle">
  <h1>[Titel]</h1>
  <p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel leo sit amet dui nonummy malesuada. Pellentesque eros. Proin ac dui a sapien tincidunt fermentum. Maecenas porttitor velit eu mauris. Cras urna nisi, vulputate in, porta id, porttitor ac, dolor. Duis venenatis diam congue tortor tempor iaculis. Nam vehicula tincidunt pede. Phasellus commodo, ante sed bibendum hendrerit, ante diam venenatis turpis, ut auctor nunc urna eu ipsum. Nam massa nunc, pellentesque ut, rutrum sed, vulputate et, metus. Vivamus eget arcu ut libero sodales fringilla. Vestibulum nonummy. Suspendisse pulvinar quam sit amet justo."</p>

<p>"Mauris elementum. Nulla non mi quis arcu laoreet vulputate. Nulla porta consectetuer magna. Sed pulvinar faucibus libero. Sed risus nisi, posuere ut, feugiat non, mattis id, orci. Donec porttitor, diam id vulputate lobortis, est mauris faucibus justo, non lacinia odio metus id ipsum. Donec viverra suscipit justo. Mauris tortor odio, placerat vel, tempor in, molestie non, velit. Nullam vitae felis quis enim semper aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam mollis quam non lectus. Vivamus imperdiet, justo et ultricies porttitor, tortor nisl viverra velit, aliquam cursus eros eros eu enim."</p>

<p>"Aenean pede nibh, tincidunt nec, tristique vel, molestie ac, sapien. Donec pretium, erat in imperdiet lobortis, pede sapien sollicitudin elit, id rutrum elit enim a nulla. Praesent ornare, tortor quis mollis blandit, purus metus aliquam erat, dignissim dapibus mauris lectus ut lectus. Donec purus. Quisque adipiscing metus sit amet arcu. Donec ante. Duis vulputate mi a diam scelerisque auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras id magna quis lorem scelerisque egestas. Praesent eget risus. In hac habitasse platea dictumst. Nam non ipsum euismod velit sagittis mollis. Mauris eu odio."</p>

</div>
<div id="footer"><img src="images/footer.gif" alt="footer" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="309,66,577,88" href="mailto:[email protected]" />
<area shape="rect" coords="621,129,757,158" href="http://www.famca.be" />
<area shape="rect" coords="10,8,150,156" href="http://www.famca.be" />
</map></div>

</div>
</body>
</html>

De CSS

Code:

body {
text-align:center;
}

#center{
width:760px;
margin-left:auto;
margin-right:auto;
}

#header {
float:left;
background-image:url(images/header.gif);
background-repeat:no-repeat;
width:760px;
height:148px;
text-align:justify;
padding-left:175px;
padding-right:-175px;

}
#header h1 {
font-family:"Courier New", Courier, monospace;
font-size:36px;
font-weight:bold;
color:#006633;
padding-top:45px;
}

#middle {
background-image:url(images/center.jpg);
background-position:bottom;
background-repeat:no-repeat;
text-align:justify;
padding-left:25px;
padding-right:25px;
}
#middle h1 {
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:bold;
color:#006633;
}
#middle p {
font-family:"Courier New", Courier, monospace;
font-size:12px;
font-weight:bold;
color:#006633;

}

#footer {
margin:0px;
padding:0px;
}

KoenDK · 20 okt 2006

werken div's niet zoals tabellen?

als ik van dit een tabel zou maken, dan zou het middenstuk (tr td) zich gewoon uitrekken

hoe meer content
hoe langer

hoe minder content
hoe korter

weet niet of dit bij divs ook zo is

ps : waarom zo een hoooooge footer :confused:

het is bijna geen footer meer te noemen :lol:

Microwaver · 20 okt 2006

Is nodig hé. kan er ook niet aan doen.

Het probleem is nu eigenlijk grotendeels opgelost qua lay out.
Maar in godsnaam! het werkt gewoon niet in emails.

Heeft iemand eigenlijk een idee hoe je een Email HTML kunt aanmaken (zoals die standaarden in outlook?)

dit zou me een hele stap vooruit kunnen zetten !

Groeten

omfg · 20 okt 2006

Microwaver zei:
Ok ik heb nu iets maar zit nog altijd met een vraagje.

het ziet eruit zoals het moet. maar in het middne lukt het enkel als'k genoeg tekst in het vakje zet.

Als de tekst nie kleiner is dan de Fc dan krijg'k de volledige afbeelding nog niet te zien

hoe los ik dit op?

min-height kan je gebruiken, maar dat werkt niet in alle browsers.. verder kan ik niet direct een oplossing bedenken

Microwaver zei:
Ook iet er iets mis met die header. daar wordt de div breder naarmate ik padding toevoeg, dit kan toch ook niet de bedoeling zijn?
wat als ik nu rond dat geheel een border wil zetten?

je zichtbare breedte is
width + border + padding + margin,
dus als je een padding van 5 pixels wil toevoegen zal je je width met 10 pixels moeten verminderen (linker en rechter padding), idem met border.

grtz

Microwaver · 20 okt 2006

Raar dat dan niet gebeurd bij de rest, daar zit ook een hoop padding in

Archief - HTML/CSS: Achtegrond afbeelding.

Microwaver

Legacy Member

omfg

Legacy Member

Microwaver

Legacy Member

Microwaver

Legacy Member

KoenDK

Legacy Member

Microwaver

Legacy Member

omfg

Legacy Member

Microwaver

Legacy Member