Avatar billede ngr Praktikant
17. december 2012 - 21:07 Der er 10 kommentarer og
1 løsning

Kan ikke få css til at virke

Har fundet noget gammel css kode, som jeg forsøger at strikke sammen til følgende struktur:
En header, som dækker hele skærmens bredde.
Derunder en menu i venstre side, med et bestemt antal pixels bredde
Og til højre for den skal indholdsvinduet fylde resten af skærmen.

Er der en, der gider se, hvad jeg gør galt:
Herunder kommer først html filen, og derunder en del af css-filen.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Minus AutoDato -->
<title>Titel</title>
<META Name="description" Content="Indhold">
<META Name="keywords" Content="stikord">
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no">
<link rel="stylesheet" href="css/ba.css" type="text/css">
</head>
<body>



<div id="side">

<div style="text-align:center"><H1>Overskrift</H1><br></div>




<div id="cont">

<div style="text-align:left"><H1>Indhold</H1>

</div> <!-- cont -->

<div id="menu">
menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>menu<br><br>

</div><!--  menu -->

</div> <!-- side -->


</div>

</body>
</html>





OG SÅ FRA CSS FILEN



body {
margin:0px;
padding:0;
background-color: #999999;
height:100%;
background-image: url(aaa.gif);
color: #000000;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
line-height: 150%;
}
div#side {
width: 100%;
margin:0 auto;
position:relative;
background-color: #f705cc;
background-image: url(../p/bag-cy-1.gif);
background-position: left top;
background-repeat: repeat;
}
div#ramme {
position:relative;
top: 40px;
left: 0;
width: 100%;
background-color: #343434;
padding-bottom: 50px;
}
div#menu {
float:left;
width:300px;
padding-left: 6px;
padding-top: 25px;
background-color: #f70516;;
Avatar billede danco Nybegynder
18. december 2012 - 00:05 #1
Du bør lave følgende HTML struktur

<div id="wrapper">

  <div id="header">  </header>

  <div id="content">   
        <div id="menu">  </div>
        <div id="side">  </div>
  </div>

</div>

Derefter vil jeg anbefale dig at sætte wrapperens bredde på max 1024 px og derefter kan du lave float left på både menu og side..
Det du opnår ved dette er alt siden er skalerbar på tværs af skærmstørrelser, plus du har en ydre containter som du kan placere elementerne indeni for at holde dem fast på de rigtige placeringer.
Avatar billede ngr Praktikant
18. december 2012 - 01:40 #2
Tak for det. Men hvordan definerer jeg wrapper, header, content, menu og side?
Avatar billede olebole Juniormester
18. december 2012 - 12:46 #3
<ole>

float er beregnet til tekstomløb - f.eks. om billeder. inline-block er derimod specielt konstrueret til at lægge block elementer ved siden af hinanden - og du undgår at 'hacke' dig ud af uheldige følgevirkninger  =)

Hvad mener du med: "Men hvordan definerer jeg wrapper, header, content, menu og side?"?

/mvh
</bole>
Avatar billede ngr Praktikant
18. december 2012 - 13:13 #4
#3:
"Hvad mener du med: "Men hvordan definerer jeg wrapper, header, content, menu og side?"?"

Der vel skal laves en css fil, hvor de defineres, og hvad skal der stå i den?

Jeg forstår ikke, hvad du mener med det første ..

Mvh
Avatar billede ngr Praktikant
18. december 2012 - 13:21 #5
Men jeg har lige fundet denne her, og den ser ud til at virke, men vil 'content' altid udfylde resten af skærmen, uanset skærmopløsning?:

<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>


.header {height: 100px; background: red}
.menu {width: 300px; float: left; background: blue}
.content {background: yellow}
Avatar billede olebole Juniormester
18. december 2012 - 13:22 #6
Så længe jeg ikke ved, hvad du ikke forstår, er det lidt svært at forklare det, så du forstår det.

På den anden side: Hvis du slet ikke kan CSS, ville det måske være en god idé at sætte sig ind i det  =)
Avatar billede ngr Praktikant
18. december 2012 - 13:46 #7
#6: Ja, men så lad du endelig være med det, olebole. Måske kommer der en forbi, som forstår dansk.
Og din belærende tone kan du godt spare dig over for mig. Det var da jeg så den, at jeg blev opmærksom på, at det var dig.
Mvh
Avatar billede olebole Juniormester
18. december 2012 - 14:05 #8
Jamen, jeg forstår skam helt fint dansk. Men du kunne jo f.eks. prøve at hjælpe dig selv ved at fortælle, hvad det er, du ikke forstår. Et grundlæggende CSS-kursus 'fra Adam og Eva' er nok ikke realistisk, så du bliver jo nødt til forklare, hav du ikke forstår.

Det er muligt, du ikke bryder dig om 'min tone', men når du undlader at forklare, hvad du ikke forstår, må man jo forklare dig, at din attitude står i vejen for hjælpen
Avatar billede ngr Praktikant
18. december 2012 - 14:17 #9
Jeg er ikke spor interesseret i din 'hjælp'
Jeg har gennem årene set rigeligt til dig og dine belæringer.
Mvh
Avatar billede olebole Juniormester
18. december 2012 - 14:26 #10
Jeg må bedrøve dig med, at så længe du opretter en tråd i et offentligt forum, kan du 'håndplukke', hvem der deltager  =)
Avatar billede ngr Praktikant
26. december 2012 - 03:38 #11
x
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

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