[CSS] Afbeelding plaatsen boven een Background

[Raikkonen_WC]

Ik heb een vraag

Ben op dit moment bezig met het ontwerpen van een eigen website, gewoon voor de gein. Nu heb ik voor mijn Menu een GIF als achtergrond die steeds herhaald word. Nu wil ik aan de onderkant van het menu (links onder dus) een afbeelding plaatsen. Deze moet, zodra je bijv op een andere resolutie kijkt, altijd links onder blijven.

Is dit te maken met CSS? Of moet je dat anders doen? Ben namelijk net pas beginnen met CSS, en ben blij dat ik nu een CSSje heb die mijn kleuren in het menu aanpast en de achtergrond toewijst.

Kan iemand mij hiermee helpen?

DIt is mijn CSS tot nu toe (zal wel niet logisch zijn, maar het werkt, zoals ik het wel..., maar kan misschien best makkelijker of profesioneler denk ik....)

Cascading Stylesheet:

BODY{font-family: arial; font-size: 12}
TABLE{font-family: arial; font-size: 12}
TD{vertical-align: top}INPUT{font-size: 12}
SELECT{font-size: 12}
.kop_zwart{font-size: 14; font-weight: bolder; color: #white}
.kop_wit{font-size: 14; font-weight: bolder; color: #white}
.kop_rood{font-size: 14; font-weight: bolder; color: #white}
.kop_oker{font-size: 14; font-weight: bolder; color: #white}
.kop_geel{font-size: 14; font-weight: bolder; color: #white}
.sluitgroep{height: 18; overflow-y: hidden}
.menugroep{text-decoration: underline; cursor: hand; BORDER-RIGHT: #104BFF 1px solid; BORDER-TOP: #104BFF 1px solid; BORDER-LEFT: #104BFF 1px solid; 

BORDER-BOTTOM: #104BFF 1px solid; HEIGHT: 1; BACKGROUND-COLOR: #0D1671; TEXT-ALIGN: center}
.menusubgroep{BORDER-RIGHT: #0D1671 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #0D1671 1px solid; BORDER-TOP-COLOR: #0D1671; PADDING-TOP: 

2px; BORDER-BOTTOM: #0D1671 1px solid; HEIGHT: 1; BACKGROUND-COLOR: #104BFF}
.aanbdiv{BORDER-RIGHT: #ffcc00 1px solid; BORDER-LEFT: #ffcc00 1px solid; BORDER-TOP-COLOR: #ffcc00; BORDER-BOTTOM: #ffcc00 1px solid; BACKGROUND-COLOR: 

#ffffff}
.aanbtop{PADDING-LEFT: 5px; FONT-WEIGHT: bolder; FONT-SIZE: 14px}
.aanbart{PADDING-LEFT: 5px}
.aanbshow{TEXT-ALIGN: RIGHT; PADDING-RIGHT: 5px; PADDING-BOTTOM: 3}
A:link{color: black}
A:visited{color: black}
A:hover{color: black}

BODY{font-family: verdana; font-size: 13; color: white; 
background-image: 
url('background_menu.jpg');
background-repeat: repeat;
background-attachment: fixed
text-decoration: none}

[ Voor 3% gewijzigd door Raikkonen_WC op 11-05-2006 23:18 ]

[Rowanov]

Een tip is om je css nog eens te bekijken en bijvoorbeeld alles wat wij bij body hoort in 1 selectie te zetten; dus: body { hier alle body styles }. Je hebt nu nogal veel dubbele. Verder kan je maar 1 achtergrond plaatje per element zetten, dus in jouw geval kan je daarvoor een menu container en een ul voor gebruiken.

HTML:

<div id="menu">
  <ul id="nav">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</div>

Cascading Stylesheet:

#menu {
  background: url('background_menu.jpg');
}
#nav {
  background: url('background_menu2.jpg') no-repeat left bottom;
}

Dit is even globaal om het uit te leggen, je zal nog wel zelf de rest van de styles moeten doen.

[ Voor 11% gewijzigd door Rowanov op 11-05-2006 21:38 ]

[BasieP]

je kan best meerdere keren 'body( }' hebben hoor, (het is alleen niet zo handig)

verder wil ik je aanraden om de standaard H1 en H2 etc. aan te passen voor koppen ipv je eigen koppen te maken.
Deze worden nl door zoekmachines, screenreaders etc. als kop gezien, en eigen tekst niet. Dit heeft een aantal voordelen.

je kan ook zoiets doen:

HTML:

<h1 class="groen">

oid om je kop een kleurtje te geven

in css heb je dan

Cascading Stylesheet:

h1 {
  font-weight: bolder;
  font-size: 14;   /*14 wat trouwens? em? px? pt? */
}

.groen {
  color: green;
}

ontopic:
je moet als je hem altijd links onder wil hebben een aantal dingen doen

• zorgen dat je pagina tenminste 100% hoog is, anders komt ie onderaan je tekst maar niet helemaal onderaan de pagina
• zorgen dat je een divje hebt wat je links onder positioneert
• hetzelfde divje absoluut maken, zodat de positionering ook daadwerkelijk wat gaat doen

[ Voor 44% gewijzigd door BasieP op 11-05-2006 22:43 ]

[Erkens]

BasieP schreef op donderdag 11 mei 2006 @ 22:41:
je kan ook zoiets doen:

HTML:

<h1 class="groen">

oid om je kop een kleurtje te geven

Dat is wel een van de slechtste naamgeving die je kan verzinnen voor een class. Wat nu als ik dat ding rood wil hebben?

Cascading Stylesheet:

.groen { color: red; }

net zoals je dat je niet classnames als "links" of "rechts" moet hebben

[ Voor 6% gewijzigd door Erkens op 11-05-2006 22:43 ]

[BasieP]

Erkens schreef op donderdag 11 mei 2006 @ 22:43:
[...]

Dat is wel een van de slechtste naamgeving die je kan verzinnen voor een class. Wat nu als ik dat ding rood wil hebben?

Cascading Stylesheet:

.groen { color: red; }

net zoals je dat je niet classnames als "links" of "rechts" moet hebben

jij noemt ze liever 'kleur1', 'kleur2' en 'kleur3'?

[Erkens]

BasieP schreef op donderdag 11 mei 2006 @ 22:44:
[...]

jij noemt ze liever 'kleur1', 'kleur2' en 'kleur3'?

Nee ook niet, hoewel het wel iets beter is dan "groen" of "rood"
Ik zou eerder namen als "title" (of "titel" als je nederlands wilt) gebruiken, dat zegt meer over die groep dan "groen".

http://css-discuss.incutio.com/?page=ClassNaming

[ Voor 20% gewijzigd door Erkens op 11-05-2006 22:50 ]

[Raikkonen_WC]

Ok, dank je, ik ga eens proberen.... Als ik nog vragen heb post ik ze hier wel.

[ Voor 80% gewijzigd door Raikkonen_WC op 11-05-2006 22:53 ]

[Raikkonen_WC]

Rowanov schreef op donderdag 11 mei 2006 @ 21:37:
Een tip is om je css nog eens te bekijken en bijvoorbeeld alles wat wij bij body hoort in 1 selectie te zetten; dus: body { hier alle body styles }. Je hebt nu nogal veel dubbele. Verder kan je maar 1 achtergrond plaatje per element zetten, dus in jouw geval kan je daarvoor een menu container en een ul voor gebruiken.

HTML:

<div id="menu">
  <ul id="nav">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</div>

Cascading Stylesheet:

#menu {
  background: url('background_menu.jpg');
}
#nav {
  background: url('background_menu2.jpg') no-repeat left bottom;
}

Dit is even globaal om het uit te leggen, je zal nog wel zelf de rest van de styles moeten doen.

Als ik deze optie gebruik, lukt het inderdaad redelijk goed, alleen shuift mijn hele menu + het plaatje nu zeker 2cm naar rechts, dus ik heb aan de linkerkant echt een balk van 2cm.?

Weet iemand toevallig hoe dat kan? Het gebeurd pas zodra ik de UL erin zet, als ik de weglaat staat alles compleet links, alleen dan natuurlijk geen afbeelding onderin.

Menu structuur is gemaakt in een soort Tabel.Heb de HTML dus moeten zeggen dat er een ) border moet zijn, anders kreeg ik om het menu een wi kader. Als alles dadelijk loopt moet ik dus alleen die tabel nog wat aar onder en wat naar rechts zien te krijgen, zonder dat de afbeelding mee verhuist...

EDIT
Als ik van die UL ook een DIV maakt, staat alles wel goed. Nu alleen die tabel waarin het menu zit, nog zien om te schuiven.

mijn CSS ziet er nu zo uit. Een vriend had me het begin gestuurd, met die kleurenopties, ik heb ze er eens uit gehaald, en er veranderd niks, dus blijkbaar niet nodig?

Cascading Stylesheet:

BODY{font-family: arial; font-size: 12}
TABLE{font-family: arial; font-size: 12}
TD{vertical-align: top}INPUT{font-size: 12}
SELECT{font-size: 12}
.sluitgroep{height: 18; overflow-y: hidden}
.menugroep{text-decoration: underline; cursor: hand; BORDER-RIGHT: #104BFF 1px solid; BORDER-TOP: #104BFF 1px solid; BORDER-LEFT: #104BFF 1px solid; BORDER-BOTTOM: #104BFF 1px solid; HEIGHT: 1; BACKGROUND-COLOR: #0D1671; TEXT-ALIGN: center}
.menusubgroep{BORDER-RIGHT: #0D1671 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #0D1671 1px solid; BORDER-TOP-COLOR: #0D1671; PADDING-TOP: 2px; BORDER-BOTTOM: #0D1671 1px solid; HEIGHT: 1; BACKGROUND-COLOR: #104BFF}
.aanbdiv{BORDER-RIGHT: #ffcc00 1px solid; BORDER-LEFT: #ffcc00 1px solid; BORDER-TOP-COLOR: #ffcc00; BORDER-BOTTOM: #ffcc00 1px solid; BACKGROUND-COLOR: #ffffff}
.aanbtop{PADDING-LEFT: 5px; FONT-WEIGHT: bolder; FONT-SIZE: 14px}
.aanbart{PADDING-LEFT: 5px}
.aanbshow{TEXT-ALIGN: RIGHT; PADDING-RIGHT: 5px; PADDING-BOTTOM: 3}
A:link{color: black}
A:visited{color: black}
A:hover{color: black}

#menu {
background-image: 
url('background_menu.jpg');
background-repeat: repeat;
background-attachment: fixed
text-decoration: none}
} 

#nav { 
background: url('background_menu_onder.jpg') no-repeat left bottom; 
}

[ Voor 45% gewijzigd door Raikkonen_WC op 11-05-2006 23:17 ]

[Rowanov]

De ul heeft standaard marges, padding, bullets (bolletjes voor de list-items) en dergelijke; als je die allemaal goed zou stylen werkt het prima. Het is dan ook gebruikelijk om voor een menu een lijst te gebruiken, aangezien een menu gewoon een opsomming van links is. Het gebruiken van het juiste element voor het juiste doel heet semantiek. Zie ook deze website: Semantiek algemeen

Edit: je bent iig al op de goede weg door je opmaak puur met css proberen te regelen. Dan is het misschien handig om aan te geven dat alle elementen een standaard style hebben die de browser er aan geeft. Wil je dus dat het er uit ziet zoals jij wilt, moet je die standaard style overschrijven door de goede waarden in je stylesheet op te nemen. Je zou bijvoorbeeld voor je lijst een "list-style: none;" op kunnen nemen om de bullets weg te toveren. Ik raad je ook zeker aan om de reference eens op een vrije middag door te bladeren, of iig als naslagwerk te gebruiken. Als je het makkelijker wilt, is er altijd op w3schools een korter overzicht.

[ Voor 48% gewijzigd door Rowanov op 11-05-2006 23:31 ]

[Boelie-Boelie]

Of voor praktijkvoorbeelden van het stylen van lists/menu's: Listutorial