Layout med stylesheets

1: ?-)
Så må du fortælle, hvordan den skal stå under det hele ...
I bunden af vinduet, eller ?o]

2:
<div style="float:right"></div>
<div style="float:left"></div>

-- og det er _ikke_ en fejl, at right står først !-)

1 - nu har jeg fået det til nogenlunde at stå som det skal på forsiden af www.vih.dk. Dog har jeg i Mozilla en horisontal scrollbar, og det vil jeg gerne undgå!

Kan man tvinge footer til at være det allersidste der vises på siden?

2 - det er perfekt. Tak for det, har allerede afløst min tabel :)
  - hvad gør man så med fx en navigationstabel, fx den jeg har billeder i på forsiden - kan det også laves med ren stylesheet?

Hos mig er topbanneret for bredt, og så skal der jo komme en scrollbar !-)

Hvis dine andre divs har position:absolute vil de ligesom 'svæve' over baggrunden, men så kan du jo sætte en gennemsigtig .gif på siden, som dækker det område du ikke vil have en footer-div på, og så sætte den ind som position:relative !o]

Topbanneret er kun defineret vha. en baggrundsfarve i css, så det kan ikke være det, der gør det :) Selve billedet er nemlig kun omkring 150px bredt!

Jeg vil gerne undgå at skulle sætte sådan nogle gif-ting på - må finde en anden løsning :)

Nåja, bredden blev jo defineret af bredden på nyhederne, så derfor blev det for bredt !-)

Nej, det er heller ikke løsningen :) Se selv på en af undersiderne, hvor det samme problem er!

Sådan en navigationslinie som på toppen af www.vih.dk er jo i virkeligheden en liste, ikke? Så skal man naturligvis også bruge en liste til den.

Her er en god artikel om at lave alt muligt med lister:
http://www.alistapart.com/articles/taminglists/

Ca. halvvejs nede ad siden er der overskriften Navigation, hvor der står beskrevet med eksempel, hvordan man laver både HTML-koden og stylesheetet for en navigationslinie som en liste. Der er også andre slags menuer i artiklen.

I det hele taget er http://www.alistapart.com/ et rigtig godt sted at finde artikler om webudvikling.

Ja, det er et godt sted. Har lavet den øverste menu om til en liste, men løber ind i et problem med at få a:hover til at oplyse hele det sorte område nu.

Mit stylesheet er i www.vih.dk/css/screen.css

Prøv dette:

#topmenu a
{
    display: block;
    width: 100%;
    color: white;
    background: transparent none;
    text-decoration: none;

}

#topmenu a:hover, #topmenu a:focus {
    background: #AC866D none;
    color: white;
}
html>body #topmenu li a {
    width: auto;
}

Har ikke helt den ønskede effekt. I stedet for at stå ved siden af hinanden, gør ovestående kode, at punkterne kommer til at stå under hinadnen. Går ud fra, at det er display: block, der er skyld i det.

Hvorfor i øvrigt skrive

html>body #topmenu li a i stedet for bare #topmenu li a?

Virker det, hvis du sætter den til inline istedet?

For at snyde en browser, som ikke virker med width: auto. Den browser understøtter ikke html>body selektoren.

08:48:28 - Nej, det ændrer ikke noget - det er stadig kun selve linket der er :hover-effekt på - ikke hele menubaren.

08:59:08 - aha!  Tak for det!

prøv at kigge på w3schools.com efter kommandoen clear. Den skal du sætte i stylesheetet. Ellers tag et lille kig på:  http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

Den kan generere et komplet layout for dig.

Håber det hjælper

Claus

claus_jac > jeg er nu ikke interesseret i noget, der kan generere layoutet for mig :) men kigger med interesse på linket. Kigger også lige på w3schools efter clear :)

Forstår ikke helt, hvad jeg skal bruge clear til?

http://www.w3schools.com/css/pr_class_clear.asp

Sliding Doors 2-artiklen har også lidt inspiration. Den handler godt nok mest om faneblade lavet med billeder, men der står noget om at få :hover-området til at dække mere end bare teksten.

http://www.alistapart.com/articles/slidingdoors2/

Jeg har fået den til at dække lidt mere end teksten, men det ser mildest talt ikke særlig godt ud crossbrowser: her følger mit stylesheet, som efter råd fra Alistapart.com er delt op i:

layout.css
----------

#topmenu {
    position: absolute;
    top: 83px;
    left: 0px;
   
    margin: 0px;
    padding:0;
    width: 100%;
    /*
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 22px;
    */


}

#topmenu ul {
    margin-left: 0;
    padding-left: 0;
    display: inline;
    }
   
#topmenu ul li {
    margin-left: 0;
    padding: 3px 10px;
    list-style: none;
    display: inline;
}
   
html>body #topmenu li a {
    width: auto;
}

markup.css
----------

#topmenu {
    background: black none;
    color: white;
}

#topmenu ul {
    margin: 0;
    padding: 0;
    display: inline;
    }

#topmenu ul li {
    margin: 0;
    list-style: none;
    display: inline;
    }
/*
html>body #topmenu li a {
    width: auto;
}
*/
#topmenu a
{   
    font-size: 80%;
    font-weight: bold;

    color: white;
    padding:3px 5px 3px 5px;
    background: transparent none;
    text-decoration: none;
}

#topmenu a:hover, #topmenu a:focus {
    background: #AC866D none;
    color: white;
}

Har fået menuerne til at makke ret nu - bl.a. med hjælp fra jer. Tak for det. Gode links også. De der vil have point smider lige et svar :-D

Her er så et svar fra mig.

Jeg kunne se på din kode, at du virkelig havde været omkring i artiklerne på http://www.alistapart.com/

sandbox > ja, jeg forsøger i hvert fald at forbedre mig :) Og det er et godt sted at gøre det :)

Tak for svarene.