Avatar billede habudu Nybegynder
04. juni 2008 - 14:28 Der er 14 kommentarer og
1 løsning

CSS Problem

Hej alle.

Er ved at blive ret træt af det her problem :/ .

Jeg er ved at lave min egen personelige hjemmeside men jeg har et problem med mit css ..

Jeg har lært css på html.dk og synes at de har nogle gode tutorials.

Ok, mit problem er at jeg bruger cssen til at bestemme højden og bredden på mine bokse ( i dette tilfælde er det en menu og en maintekst )

Men ligeså snart andre kigger på siden siger de at de ser helt underligt ud ..

Eksempel: http://www.nicklasnra.frac.dk

Jeg har prøvet en masse men har stadig ikke fundet løsningen :/
her er mit css:

fieldset {
color: #9ABEC0;
}
#menupic {
top: 13%;
left: 9%;
position: fixed;
}
body {
background-color: #224D4F;
letter-spacing: 1px;
color: white;
font-family: verdana;
}
a {
color: white;
}
a.hover {
color: white;
}
a.visited {
color: white;
}
a.active {
color: white;
}
#maintekst  {
font-family: verdana;
background-color: #429194;
width: 960px;
height: 1000px;
border: 3px solid black;
top: 20%;
}
#copyright {
font-family: verdana;
font-size: 10px;
letter-spacing: 0px;
}
#menu {
font-family: verdana;
position:fixed;
top: 20%;
left: 9%;
background-color: #429194;
border: 3px solid black;
width: 200px;
height: 550px;
}

Håber at i forstår mig og at i kan hjælpe mig :) ..

PS: Hvis i så min side inde på nicklasnra.frac.dk, kan i se her hvordan det ser ud på MIN skærm:
http://img222.imageshack.us/img222/3680/damnch4.jpg
Avatar billede habudu Nybegynder
04. juni 2008 - 14:29 #1
Rettelse:

min side ligger på http://www.nicklasnra.frac.dk/HP
Avatar billede w13 Novice
04. juni 2008 - 14:32 #2
Ja, problemet opstår (bl.a. også hos mig), hvis skærmen ikke er stor nok, dvs. ligeså bred som din.

Prøv at rette:

width: 960px;

til et procenttal i stedet, så hovedindholdet altid fylder den samme procent af skærmen, f.eks.:

width: 60%;
Avatar billede mclemens Nybegynder
04. juni 2008 - 15:17 #3
Position:fixed er ikke understøttet i IE6, så medmindre
du vil undvære ie6 brugere så skal du undgå brug af position
fixed eller ikke bruge det til vigtige designmæssige finesser.

At definere afstande og størrelser baseret på %
går tit galt da det baserer sig på størrelsen
af skærmen - hvis du f.eks. designer til 1024 og
de har opløsningen i 1600 kan indholdet virke ret
strukket og modsat hvis det er den anden vej.

Overvej evt. at designe siden med fastsat px størrelser
f.eks. en div med margin:0 auto; og fastsat width.
Inden i den ligger evt div med toplogo og så en div
med float left og fastsat width samt en div med float
right og fastsat width. Hvis du ikke bruger topbanner
kan du også lægge banneret over din højre kolonne ...
Avatar billede mclemens Nybegynder
04. juni 2008 - 15:24 #4
(husk at checke din validering engang imellem når du markup'er
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nicklasnra.frac.dk%2FHP%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
... overvej evt. også om du egentlig vil køre xhtml - se Olebole's
artikler samt tråden her http://www.eksperten.dk/spm/719030#rid6329022)
Avatar billede mclemens Nybegynder
04. juni 2008 - 15:25 #5
Avatar billede habudu Nybegynder
04. juni 2008 - 18:34 #6
Til mclemens

Er ikke helt sikker på hvad du mener.
Hvordan gør jeg det dermed margin:0 auto;

?
Avatar billede mclemens Nybegynder
04. juni 2008 - 20:47 #7
F.eks.:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
html {margin:0;padding: 20px 0;}
body {background:#224D4F;letter-spacing:1px;color:#fff;font-family: verdana,sans-serif;margin:0;padding:0;}

a {color:#fff;}
a img {border:0;}
h1,p {margin:0;padding:0;}
p {font-weight:bold;margin-bottom:15px;}
h1 {text-align:center;margin:10px 0;}


#main {width:960px;margin:0 auto;}
#right {width:700px;float:right;}
#logo {display:block;width:400px;margin:0 auto;height:110px;overflow:hidden;}

#maintekst{background: #429194;height: 1000px;border: 3px solid black;padding:0 20px;}



#left {padding-top:60px;width:240px;}

#menupic {display:block;margin:0 auto;width:200px;}
#menu {background-color: #429194;border: 3px solid black;
height: 550px;}

#menu p {text-align:center;}

p.hr {border-top:1px solid #fff;padding-top:15px;}
    </style>
    <title>Titel</title>
</head><body><div id="main">





<div id="right">

<a id="logo" href="http://www.nicklasnra.frac.dk/"><img src="logo.jpg" alt="Nicklas" /></a>

<div id="maintekst">

<h1>Velkommen til min hjemmeside!</h1>

<p>Hey, og velkommen til min hjemmeside</p>

<p>Denne hjemmeside har jeg selv lavet, og den handler om mig, og om de ting jeg går rundt og laver. På nettet og i min fritid.</p>

<p>Jeg er en dreng og jeg er meget intresseret indenfor
webprogrammering ( bla. HTML, CSS, PHP ) . Denne side har jeg selv
lavet i programmet notepad.</p>

<p>Her på min side er der lidt af det jeg har lavet, og det er jeg er i gang med at lave, og så kan du også læse lidt mere om mig.</p>

<p>Jeg har prøvet at gøre farverne på siden behagelige for øjnene, så
man ikke skal sidde og knibe øjnene sammen. Det hader jeg nemlig selv.
</p>

<p>God fornøjelse her på min side!</p>

<p>Nicklas,</p>

</div>

</div>






<div id="left">
<img id="menupic" src="menu.gif" alt="menu" />

<div id="menu">

<p><a href="http://www.nicklasnra.frac.dk/">Home</a></p>

<p><a href="http://www.nicklasnra.frac.dk/ommig.html">Om mig</a></p>

<p><a href="http://www.nicklasnra.frac.dk/misc">Misc</a></p>

<p><a href="http://www.nicklasnra.frac.dk/php">Php</a></p>

<p><a href="http://www.nicklasnra.frac.dk/spil.html">Spil</a></p>

<p><a href="http://nicklasnra.frac.dk/kontakt.php">Kontakt</a></p>

<p class="hr"><a href="http://jigsaw.w3.org/css-validator/"><img src="vcss-blue.png" alt="Valid CSS!" /></a></p>

</div>

</div>



</div></body></html>
Avatar billede mclemens Nybegynder
04. juni 2008 - 20:49 #8
Ret lige doctypen retur til xhtml 1.0 strict hvis du kører
videre med xhtml eller 4.01 strict hvis du skifter til html.
(Husk at rette img tags m.v. så. style er ikke lagt eksternt
for eksemplets skyld ... men bør ligges ud eksternt ...)
Avatar billede mclemens Nybegynder
04. juni 2008 - 21:43 #9
Hvis du vil køre i % kan du rette width i
left right og main til % - main kan f.eks. være
95% og så right 75% og left 23% (d.v.s. 75% og 23%
svarer til henholdsvis 75 og 25% af de 95% på main)
Avatar billede habudu Nybegynder
05. juni 2008 - 20:33 #10
Tak for det ;) .. det virker godt .. har bare stadig svært ved at se hvad du gør :/
Avatar billede habudu Nybegynder
05. juni 2008 - 20:34 #11
Hvordan giver jeg point?
Avatar billede mclemens Nybegynder
05. juni 2008 - 20:46 #12
Her er et svar til at acceptere :o)
Avatar billede mclemens Nybegynder
05. juni 2008 - 20:50 #13
M.h.t. opbygningen så prøv at gå elementerne igennem fra toppen af og
læg mærke til deres css samt hvilke elementer de er lagt ind under.

Prøv at definere background:#ff0000; på enkelte af
css'erne og se hvilke dele de påvirker og slet evt.
css værdier for at se effekten af de enkelte dele.

Jeg tog egentligt blot dit eksisterende design og
byggede det om med floats som jeg ville have bygget
det. M.h.t. p elementerne, så slettede jeg de b
elementer der var inde i alle p elementer og gav
p en bold font. (samt nulstillede ,margin og padding
på elementet så det blev mere ens crossbrowser mæssig).
Avatar billede habudu Nybegynder
05. juni 2008 - 20:58 #14
Ok, tak for hjælpen ..
Avatar billede mclemens Nybegynder
05. juni 2008 - 21:13 #15
Velbekomme, og tak for point :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester