|
| Hjemmesideopbygning med CSS Fra : Carsten Christensen |
Dato : 25-01-06 15:17 |
|
Jeg er i gang med at lave min første hjemmesideopbygning med CSS
i stedet for tables. Det giver dog en del problemer da jeg vil
have koden til menuen til at stå nederst i dokumentet. Det har
jeg gjort med <div> hvor jeg var nødt til at lave alle bokses
position absolute. Dette gav endnu et problem da jeg vil have
siden til at fylde 100%, og CSS tager 100% af f.eks højden.
Dvs. at min venstrestillede menu gylder 100% + de 150px som
topbanneren fylder. Så satte jeg <div> til at gå helt fra toppen,
og justerede ned med margin. Det virker også ok. Men nu vil jeg
gerne have box i bunden der er ca. 20-30px høj og hele bredden,
men den overlapper så min menu?!?
Jeg tror det skal gribes an på en anden måde. Det hele startede
efter jeg havde læst artiklen på html.dk om SEO. Så det er derfor
jeg vil have selve indholdet af siden kommer før menuen.
Min side skal have en ret alm. opbygning, dvs.:
Topbanner der fylder 100% i bredden
3 boxe under min topbanner
box i bunden, 100% i bredde og ca. 30px høj - skal altid ligge
lige under de 3 boxe ovenover.
Det nemmeste er nok at det jeg er kørt fast i.
http://www.brainiac.dk
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Ukendt (25-01-2006)
| Kommentar Fra : Ukendt |
Dato : 25-01-06 17:30 |
|
"Carsten Christensen" <carsten-fjern_dette-@e-ingenior.dk> skrev i en
meddelelse news:43d78865$0$15791$14726298@news.sunsite.dk...
> Jeg er i gang med at lave min første hjemmesideopbygning med CSS
> i stedet for tables.
Det er også en gode ide
> Min side skal have en ret alm. opbygning, dvs.:
> Topbanner der fylder 100% i bredden
> 3 boxe under min topbanner
> box i bunden, 100% i bredde og ca. 30px høj - skal altid ligge
> lige under de 3 boxe ovenover.
>
> Det nemmeste er nok at det jeg er kørt fast i.
> http://www.brainiac.dk
Går ud fra det er ovenstående side du er ved at lave. Eller er det? Jeg
undrer mig nemlig lidt over der eksisterer op til flere tabeller i koden,
som du skriver du ikke vil bruge.
Men kan da sige du mangler at angive en doctype på den omtalte side.
Jeg vil ikke bruge mere tid på siden nu da jeg er noget i tvivl om det
overhovedet er den.
--
Med venlig hilsen
Carsten Sørensen
Nørholm Forsamlingshus - http://forshus.dk.
| |
Carsten Christensen (25-01-2006)
| Kommentar Fra : Carsten Christensen |
Dato : 25-01-06 17:59 |
|
Ja, det er www.brainiac.dk jeg er ved at lave. Grunden til at der stadig
optræder tables i koden er, at det er noget jeg afprøver. Selve opbygningen
er lavet med CSS. Jeg har fundet siden
http://hjemmesideskolen.dk/html/position.asp?id=posmenu
som har hjulpet mig en del videre, men min bund bil ikke helt som jeg vil, og
jeg synes jeg gør som beskrevet!? Jeg vil naturligvis have bunden til at være
helt nede i bunden af browseren, altid, og den skal ikke overlappe menuen,
eller omvendt.
Jeg har uploadet en ny version.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Erik Ginnerskov (26-01-2006)
| Kommentar Fra : Erik Ginnerskov |
Dato : 26-01-06 01:37 |
|
Carsten Christensen wrote:
> men min bund bil ikke helt som jeg
> vil, og jeg synes jeg gør som beskrevet!? Jeg vil naturligvis have
> bunden til at være helt nede i bunden af browseren, altid, og den
> skal ikke overlappe menuen, eller omvendt.
Lav denne ændring i din css:
#bottom {
position: absolute;
bottom: 5px;
position: fixed;
margin-left:175px;
width: 100%;
border: 1px solid black;
}
Så fungerer det i FF og Opera. For at få det til også at virke i IE, skal du
læse denne side:
http://hjemmesideskolen.dk/html/testsider/fixed.asp
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/
| |
Carsten Christensen (26-01-2006)
| Kommentar Fra : Carsten Christensen |
Dato : 26-01-06 08:19 |
|
Jeg kan se på mit indlæg at jeg fik udtrykt mig lidt forkert. Jeg ønsker bare
at bunden ikke kommer op bag menuen, men stopper lige under. Hvis sidens tekst
fylder mere end browseren kan vise (og der kommer scroller bar), skal bunden
være under teksten, altså ikke synlig i browseren når der scolles helt op.
Håber I forstår hvad jeg mener, det andet var vist noget vrøvl.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Jørgen Farum Jensen (26-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 26-01-06 10:22 |
|
Carsten Christensen wrote:
> Jeg kan se på mit indlæg at jeg fik udtrykt mig lidt forkert. Jeg ønsker bare
> at bunden ikke kommer op bag menuen, men stopper lige under. Hvis sidens tekst
> fylder mere end browseren kan vise (og der kommer scroller bar), skal bunden
> være under teksten, altså ikke synlig i browseren når der scolles helt op.
>
> Håber I forstår hvad jeg mener, det andet var vist noget vrøvl.
>
Du skal ikke layoute websider med tabeller, det er tiden forlængst
løbet fra.
Til at lave det layout, du ønsker, hvor sidefoden skubbes ned af
indeholdet i den ene eller den anden kolonne, skal du nok bruge
float-egenskaben.
Se mine artikler om emnet:
http://www.webdesign101.dk/csslayout/
eller spring evt. direkte til kvikfix-løsningen
http://www.webdesign101.dk/csslayout/ex/principlayout_7.html
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
Carsten Christensen (26-01-2006)
| Kommentar Fra : Carsten Christensen |
Dato : 26-01-06 10:40 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Du skal ikke layoute websider med tabeller, det er tiden forlængst
> løbet fra.
Det er netop du mit indlæg går ud på - jeg er ved at bygge siden op med CSS.
Det layout jeg gerne vil lave, er faktisk det du har på siden her:
http://www.webdesign101.dk/csslayout/eksempler/layout4a.html
med nogle justeringer selvfølgelig.
Men spørgsmåler er bare, hvad der sker hvis din tekst ikke var så lang. Vil bunden
så ikke kravle op under din menu i venstre side, lige som den gør på min?
www.brainiac.dk
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Carsten Christensen (26-01-2006)
| Kommentar Fra : Carsten Christensen |
Dato : 26-01-06 13:06 |
|
Jeg er kommet frem til en løsning, ved ikke om der er en bedre. Højden på boxen med
min hovedtekst har jeg sat til 450px, så den når under menuen. Inde i min tekstbox,
har har jeg så lavet to boxe, således at jeg også får en søjle i venstre side (ville
have baggrunden i søjlen til at gå helt ned til foden, så jeg tror umiddelbart at det
var den bedste løsning).
Jeg ved ikke det var den beste løsning, så jeg vil meget gerne have kommentarer. Jeg
skal nok skille mig af med de sidste tabeller
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Jørgen Farum Jensen (26-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 26-01-06 14:14 |
|
Carsten Christensen wrote:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
>>Du skal ikke layoute websider med tabeller, det er tiden forlængst
>>løbet fra.
>
>
> Det er netop du mit indlæg går ud på - jeg er ved at bygge siden op med CSS.
>
> Det layout jeg gerne vil lave, er faktisk det du har på siden her:
> http://www.webdesign101.dk/csslayout/eksempler/layout4a.html
> med nogle justeringer selvfølgelig.
>
> Men spørgsmåler er bare, hvad der sker hvis din tekst ikke var så lang. Vil bunden
> så ikke kravle op under din menu i venstre side, lige som den gør på min?
> www.brainiac.dk
>
>
>
Jo det ville den, og det var derfor jeg henviste til et andet
(og meget nyere) eksempel.
Men den løsning, der passer bedst til dig er uden tvivl:
http://www.webdesign101.dk/csslayout/ex/favorit_4.html
Til din bemærkning:
"Jeg ved ikke det var den beste løsning, så jeg vil meget
gerne have kommentarer. Jeg skal nok skille mig af med de
sidste tabeller"
- vil jeg sige, at det generelt er en dårlig løsning at
bruge height. Du ved jo aldrig hvormeget dit indhold
fylder, hvis for eksempel bruger vælger at vise din
side med større skrift.
Jeg vil også anbefale dig at droppe den iframe, eller
i det mindste vælge den dokumenttypeerklæring, der
tillader det. Som det er nu får du en del valideringsfejl
på http://validator.w3.org.
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
Carsten Christensen (26-01-2006)
| Kommentar Fra : Carsten Christensen |
Dato : 26-01-06 16:10 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> > Men spørgsmåler er bare, hvad der sker hvis din tekst ikke var så lang. Vil bunden
> > så ikke kravle op under din menu i venstre side, lige som den gør på min?
> > www.brainiac.dk
> >
> >
> >
> Jo det ville den, og det var derfor jeg henviste til et andet
> (og meget nyere) eksempel.
Jeg går ud fra at det er dette eksempel du mener:
http://www.webdesign101.dk/csslayout/ex/principlayout_7.html
> Men den løsning, der passer bedst til dig er uden tvivl:
>
> http://www.webdesign101.dk/csslayout/ex/favorit_4.html
Disse er også helt fine, men jeg synes ikke det ser ud som om det løser problemet med
at bunden kravler op under menuen. Du må lige rette mig hvis jeg tager fejl.
> Jeg vil også anbefale dig at droppe den iframe, eller
> i det mindste vælge den dokumenttypeerklæring, der
> tillader det. Som det er nu får du en del valideringsfejl
> på http://validator.w3.org.
det iframe tag jeg satte ind var lidt på forsøgsbasis, da den kommer fra min gamle
side. Så den skal jeg have fundet en anden løsning til.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Jørgen Farum Jensen (26-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 26-01-06 19:05 |
|
Carsten Christensen wrote:
>> http://www.webdesign101.dk/csslayout/ex/favorit_4.html
>
>
> Disse er også helt fine, men jeg synes ikke det ser ud som om det løser problemet med
> at bunden kravler op under menuen. Du må lige rette mig hvis jeg tager fejl.
>
Det gør du ikke. Jeg ser, på baggrund af vores lille
dialog, at jeg er kommet galt af sted med mine
eksempler.
Det eksempel, jeg burder have henvist til, er
http://www.webdesign101.dk/csslayout/ex/nichols_3.html
Men det er ikke særlig tydeligt heller ikke af mine
artikler, at det er netop det eksempel, som sørger
for at skubbe sidefoden ned under den spalte, der har
det meste indhold.
Der er andre og også mere komplicerede løsninger på
problemet, men det er det netop nævnte eksempel, jeg
tror du kommer længst med i denne omgang.
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
Erik Ginnerskov (27-01-2006)
| Kommentar Fra : Erik Ginnerskov |
Dato : 27-01-06 01:33 |
|
Carsten Christensen wrote:
> Jeg kan se på mit indlæg at jeg fik udtrykt mig lidt forkert. Jeg
> ønsker bare at bunden ikke kommer op bag menuen, men stopper lige
> under. Hvis sidens tekst fylder mere end browseren kan vise (og der
> kommer scroller bar), skal bunden være under teksten, altså ikke
> synlig i browseren når der scolles helt op.
Så skal du bare indsætte din menu og indholdet til højre for menuen med
float:left og derefter indsætte din #bottom med clear:both.
Hvis indholdet til højre for menuen er kortere end menuen, står #bottom
under menuen. Bliver indholdet til højre for menuen længere end menuen,
skubbes #bottom automatisk ned.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/
| |
Jørgen Farum Jensen (25-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 25-01-06 17:59 |
|
Carsten Christensen wrote:
> Jeg tror det skal gribes an på en anden måde. Det hele startede
> efter jeg havde læst artiklen på html.dk om SEO. Så det er derfor
> jeg vil have selve indholdet af siden kommer før menuen.
For at løse det problem behøver du overhovedet ikke at
bekymre dig om havor menuen står på siden, når siden
betragtes i en browser.
Du skal indsætte din menu til sidst i /kildekoden/, det
vil sige /efter/ din artikel. Så kan du positionere den på
websiden ved hjælp af position:absolute:
#menu {
position:absolute;
left: [afstanden fra browservinduets venstre kant];
top: [afstanden fra browservinduets overkant ];
}
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
|
|