[html+css]Tekst stijl, links en achtergrond kleur problemen - Softwareontwikkeling

dinsdag 9 oktober 2007 14:01

Acties:

0 Henk 'm!

No smoke, no poke

Topicstarter

Ik heb al een tijd een nieuwe layout op mijn site en ik heb toen alleen de layout in een bestand genaamd style.css gezet, verder had ik alles in de html pagina's zelf gezet van tekst stijl, link stijl etc. Nu ben ik inmiddels verder met html en css door middel van tutorials via het internet enzo.
Nu heb ik het volgende gemaakt in elke pagina om de tekst stijl toe te wijzen, in plaats van voor elke alinea font te moeten gebruiken.

Voorbeeld van de home.html hoe dit er uit ziet in elke pagina:

Cascading Stylesheet:

html>
<head>
<title>Joopies place - www.joopiesplace.8s.nl</title>
<link rel="shortcut icon" href="layout/jp.png" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
a {
font-family: verdana;
font-size: 10px;
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body bgcolor="fff7ea">
<div id="body">
<div id="container">
<div id="header"></div>
<div id="gradient"></div>
<center>
<div id="nav"><iframe src="menu.html" width="160" height="412" frameborder="0" name="menu"></iframe></div>

<div id="content"><iframe src="home.html" width="592" height="412" frameborder="0" name="tekstvak"></iframe></div>
<a href="disclaimer.html" target="tekstvak"><div id="footer">copyright (C) johan hogervorst</div></a>
</center>
</body>
</html>

Nu zijn er een aantal dingen die ik me afvraag, en een aantal problemen. Hier kom ik niet uit, ook niet via google, dit forum en ander zoekwerk.

1. In elke pagina moet ik in de head de tekst stijl zetten, kan je dit niet gewoon in de style.css waar de layout in staat of in een apparte pagina zetten en dat hij dat elke keer er in laad? Of hoe kan ik dit beter doen? Via google kwam ik niet met een goed antwoord of een werkend antwoord.

2. De achtergrond kleur van de body staat nu gewoon in de index, kan dit in de style.css worden gezet of hoe moet dit? (hier heb ik wel een aantal antwoorden voor gevonden om in de style.css bij #body de achtergrond kleur te zetten, maar dit werkte niet). Ook met de achtergrondkleur heb ik een aantal problemen, de kleur is licht geel/wit en naar mijn idee word die niet weergegeven in IE6 en IE7, FF2 werkt zonder problemen.

3. De links in het menu aan de linkerkant die worden in FF2 netjes gecentreerd weergegeven maar in IE6 en IE7 iets naar links, dus niet netjes gecentreerd weergegeven. De div van dit onderdeel is gecentreerd in het html bestand. Ik krijg deze niet goed, ook niet door positions te gebruiken in de tekst stijl boven inde pagina.

Ik hoop dat jullie mij kunnen helpen hiermee en met tips kunnen komen.

De site is hier te bekijken.

Het leven is te kort om geduld te hebben!

dinsdag 9 oktober 2007 14:09

Acties:

0 Henk 'm!

TeeDee

CQB 241

Bijvoorbeeld:

HTML:

<html>
<head>
<title>Joopies place - www.joopiesplace.8s.nl</title>
<link rel="shortcut icon" href="layout/jp.png" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body bgcolor="fff7ea">
<div id="body">

Vervolgens in "style.css"

Cascading Stylesheet:

a {
font-family: verdana;
font-size: 10px;
color: #ffffff;
text-decoration: none;
}

1: zie boven dus

2: ook in je style.css

Cascading Stylesheet:

1	body {background-color: #fff7ea;}

En dan kan je dat ook weer uit je html halen (dus <body bgcolor=...> wordt <body>)
3: Daar ik niet op je site kan komen kan ik daar niet veel zinnigs over zeggen.

Wat ik wel wil zeggen is:
Maak gebruik van een correcte DTD. Bijvoorbeeld:

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tevens een <div id="body"> lijkt me niet handig. Die kan je weghalen

(Pas dan meteen weer je CSS aan, mocht je een ref. naar #body hebben.

En als je dan toch lekker bezig bent: kijk even naar een kort/handig artikel over semantiek!

[ Voor 6% gewijzigd door TeeDee op 09-10-2007 14:10 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 9 oktober 2007 14:09

Acties:

0 Henk 'm!

Anoniem: 221919

1. Je zou bijvoorbeeld het gedeelte van < html > tot < /head > in 1 html bestandje kunnen zetten en die steeds kunnen includen bovenaan een pagina: http://www.boutell.com/newfaq/creating/include.html

2. in de stylesheet kun je het zo neerzetten:
HTML {
BACKGROUND: url(../img/bdy_background.png) #fff fixed repeat-x center top
}

BODY {
FONT: 0.7em/1.6em Tahoma, Arial, Sans-Serif; COLOR: #373834; PADDING-TOP: 0px
}

3. laat ik voor een ander open..

[ Voor 13% gewijzigd door Anoniem: 221919 op 09-10-2007 14:10 ]

dinsdag 9 oktober 2007 14:14

Acties:

0 Henk 'm!

TeeDee

CQB 241

Anoniem: 221919 schreef op dinsdag 09 oktober 2007 @ 14:09:
1. Je zou bijvoorbeeld het gedeelte van < html > tot < /head > in 1 html bestandje kunnen zetten en die steeds kunnen includen bovenaan een pagina: http://www.boutell.com/newfaq/creating/include.html

Ik hoop niet dat je Joopieboy de 'clientSideInclude' aan gaat smeren? Dat lijkt me trouwens niet eens fatsoenlijk werkbaar als je <html>..</head> erin gaat zetten.

Mocht je de serverside includes bedoelen: laten we daar maar even op wachten.

Dus Joopieboy: heb je de mogelijkheid tot een script taal (php, asp(.net))?

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 9 oktober 2007 14:21

Acties:

0 Henk 'm!

Anoniem: 221919

TeeDee schreef op dinsdag 09 oktober 2007 @ 14:14:
[...]

Ik hoop niet dat je Joopieboy de 'clientSideInclude' aan gaat smeren? Dat lijkt me trouwens niet eens fatsoenlijk werkbaar als je <html>..</head> erin gaat zetten.

Includes in het algemeen dat hij er wat van kan leren. Staan meerdere mogelijkheden...
(google "include html" is de 1e link)

[ Voor 4% gewijzigd door Anoniem: 221919 op 09-10-2007 14:23 ]

dinsdag 9 oktober 2007 14:49

Acties:

0 Henk 'm!

Joopieboy

No smoke, no poke

Topicstarter

@TeeDee: Nee helaas, die mogelijkheid heb ik niet. Maar wel super bedankt voor uw hulp tot zover, de achtergrond kleur is gelukt, was eigenlijk heel simpel.

Ik heb nu op de server de site aangepast op de volgende dingen: doctype erin geplaatst, background color in de style.css. Tot zover gaat het goed.

Nu ben ik op deze pc wat aan het proberen met de site om met de tekst style en de div's de dingen anders te doen, alleen het gaat niet goed.
De tekst word niet zoals ik wil, die blijft standaard en met de divs anders komt de site helemaal niet meer...
Dus hoe die divs dan moeten worden, en hoe je die tekst laat werken, ik heb even geen idee.
Op dit moment probeer ik via google het een en ander hier over te vinden.

Edit 2:
Op het moment heb ik de style.css zo aangepast:

Cascading Stylesheet:

#body
    {text-align: center;
    background-color: #fff7ea;
    width: 800px;
    height: 600px;
    margin: 0 auto;
    text-align: left;}
#header 
    {background-image: url(layout/header.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 134px;}
#tussenbalk
    {background-image: url(layout/balk.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 40px;
    float: left;}
#menu
    {background-image: url(layout/menu.jpg);
    background-repeat: no-repeat;
    width: 184px;
    height: 412px;
    float: left;}
    a {font-family: verdana;
    font-size: 16px;
    color: #ffffff;
    text-decoration: underline;}
    p {font-family: verdana;
    font-size: 16px;
    color: #ffffff;}
#tekstvak
    {background-image: url(layout/tekstvak.jpg);
    background-repeat: no-repeat;
    width: 616px;
    height: 412px;
    float: left;}
    a {font-family: verdana;
    font-size: 16px;
    color: #ffffff;
    text-decoration: underline;}
    p {font-family: verdana;
    font-size: 16px;
    color: #ffffff;}
#footer
    {background-image: url(layout/footer.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 14px;
    float: left;}
    a {font-family: verdana;
    font-size: 9px;
    color: #ffffff;
    text-decoration: none;}

Ik kopieër hem maar even helemaal, nu verwacht ik het vanaf hier al niet goed meer snap en het hierdoor fout doe?

Edit 3:
Nu ben ik weer hier op deze pc bezig met iets wat ikv ia google heb gevonden, op elke pagina dit zetten:

Cascading Stylesheet:

<head>
<style type="text/css">
@import url(style.css);
</style>
</head>

Dit werkt goed, alleen de tekst krijg ik wederom niet goed.

En de div id's gebruik ik nog steeds, wat kan daar mee?
Maar is deze manier zo goed? Of hoe kan ik het beter anders doen?
En zo ja, de tekst gaat goed, de kleur ook, alleen de links die zijn niet goed, geen underline en te klein... Wat zie ik over het hoofd?

[ Voor 141% gewijzigd door Joopieboy op 09-10-2007 15:33 ]

Het leven is te kort om geduld te hebben!

dinsdag 9 oktober 2007 15:31

Acties:

0 Henk 'm!

Anoniem: 221919

<body>
<div id="body">
<div id="container">
<div id="header"></div>
<div id="gradient"></div>

<center>
<div id="nav">
<iframe src="menu.html" width="160" height="412" frameborder="0" name="menu"></iframe>
</div>

<div id="content">
<iframe src="home.html" width="592" height="412" frameborder="0" name="tekstvak"></iframe>
</div>

<div id="footer">
<a href="disclaimer.html" target="tekstvak">copyright (C) johan hogervorst</a>
ik neem aan dat je deze link in de div wilt hebben. Zet dan alle ook in de div, en begin er niet buiten.
</div>
</center>
</div> --> afsluiten div genaamd container
</div> --> afsluiten div genaamd body
</body>

- <div id="body"> is heel wat anders dan <body>. Waarschijnlijk bedoelde je met de div body de <body>? Zo ja dan is div body overbodig, zo niet noem de div body anders om duidelijkheid te scheppen. Het is bijvoorbeeld ook niet slim om een div html te noemen (ja kan wel inderdaad).
- als je en <div> begint moet je hem ook weer sluiten (div container en div body had je niet afgesloten)
- ik raad aan nog wat css voorbeelden te bekijken/bestuderen

dinsdag 9 oktober 2007 15:35

Acties:

0 Henk 'm!

Anoniem: 221919

er zijn 4 manieren om je css te importeren in je site:
http://www.gigadesign.be/2005/07/de-hierarchie-in-css/

De links werken niet goed omdat je deze eigenschappen als laatste in het css bestand aan de links hebt meegegeven:
a {font-family: verdana;
font-size: 9px;
color: #ffffff;
text-decoration: none;}

Het css bestand wordt van boven naar onder gelezen en kijkt dus naar de laatste input. De andere 2 "a's"zijn dus alweer vergeten.

[ Voor 65% gewijzigd door Anoniem: 221919 op 09-10-2007 15:39 ]

dinsdag 9 oktober 2007 15:38

Acties:

0 Henk 'm!

Joopieboy

No smoke, no poke

Topicstarter

U ok erg bedankt, de div footer had ik zo staan omdat ie anders te laag komt, de footer is nml erg smal en anders valt de onderkant van de tekst iewat weg, zoals als die er stond werkt die, raar maar waar.
Dat van de divs afsluiten was mij ontschoten, die heb ik ook gelijk verbeterd.

Btw, in de style.css heb ik nu in de footer, in het tekstvak en in het menu allebei apparte tekststyles staan, voor de links (a) en voor de gewone tekst (p). Nu is de tekst bij alle 3 hetzelfde dus die werkt goed, alleen de links wil ik anders, nml bij de footer 9px groot en zonder underline, het menu en in het tekstvak wil ik de links 16px groot hebben en wel underlined.
Wat hij nu dus fout doet, hij pakt overal de tekst style die ik voor de footer had ingesteld...
Hoe los ik dat op?

[ Voor 46% gewijzigd door Joopieboy op 09-10-2007 15:41 ]

Het leven is te kort om geduld te hebben!

dinsdag 9 oktober 2007 15:47

Acties:

0 Henk 'm!

Anoniem: 221919

voorbeeldje:
#footer a {
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}

dinsdag 9 oktober 2007 15:58

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Hoe los ik dat op?

En dat is nou niet de bedoeling van dit subforum; sterker nog niet de bedoeling van het gehele forum. Probeer alstublieft zelf inzet te tonen, lees tutorials, lees de standaarden, ga proberen en gebruik google als je zoekmaat.

Dit topic gaat dicht, het ontspoorde redelijk in het begin en nu lijkt het helemaal op een "kan iemand even mijn problemen oplossen" topic.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1

Dit topic is gesloten.