html - Lidt hjælp til min kode - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #10113 @ 04.04.08 22:22

Hejsa alle jer udviklere.
Det er lang tid siden at jeg sidst har beskæftiget mig med HTML, CSS eller PHP. Men i går fik jeg en idé til en ny side, og med den idé i baghovedet gik jeg i gang med at lave designet til siden. Som så mange gange før rendte jeg ind i nogle problemer.

De problemer jeg har er som følger:
1/ Under logoet er der et mellemrum inden borderen kommer.
2/ Jeg gør brug af opacity og W3Cs validator siger at det må jeg ikke fordi at jeg bruger CSS 2.02 og opacity kan kun bruger i version 3. Hvordan skifter jeg til CSS version 3?
3/ #rightmenu har ikke så meget indhold som #contentn og derfor kan man se den grå baggrund. Jeg vil gerne have #rightmenu til at tilpasse sig sådan så at vis #content er højere bliver #rightmenu også højere. Og vis #rightmenu bliver højere end #content så vil #content blive lige så høj som #rightmenu.

Jeg håber at i kan hjælpe mig med det.

Udover mine spørgsmål vil jeg også meget gerne høre jeres mening om designet?

Til sidst har jeg også et lille spørgsmål. Hvad er forskellen på id og class udover at et id element kun kan optræde en gang på en side?

Siden kan ses her: Artik

Min HTML kode ser sådan ud:

Kode

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<head>
  <title>Artik</title>
  <link rel="stylesheet" type="text/css" href="stil.css">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="mainframe">
  <img src="logo.jpg"alt="Artik" title="Artik">
  <div id="menu">
    <a href="index.html" title="Gå til forsiden">Forside</a>
    <div class="cut"></div>
    <a href="index.html" title="Gå til forsiden">Forside</a>
    <div class="cut"></div>
    <a href="index.html" title="Gå til forsiden">Forside</a>
    <div class="cut"></div>
    <a href="index.html" title="Gå til forsiden">Forside</a>
    <div class="cut"></div>
    <a href="index.html" title="Gå til forsiden">Forside</a>
    <div class="cut"></div>
    <a href="index.html" title="Gå til forsiden">Forside</a>
    <div class="cut"></div>
  </div>
  <div id="rightmenu">
    <h3>Nyeste artikler</h3>
    <p>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
      Nyeste artikler<br>
    </p>
  </div>
  <div id="content">
    <h1>Velkommen til Artik</h1>
    <p>
      hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!!
    </p>
    <h2>Hej med dig</h2>
    <p>
      hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!! hej med dig din lille lus!!!
    </p>
  </div>
</div>
<div id="logo" title="Artik">Artik</div>
<div id="bottom">Copyright by din fætters onkel</div>
</body>
</html>

Min CSS ser sådan ud:

Kode

body {
background:#eeeeee;
margin:5px;
font: x-small sans-serif;
}
#mainframe{
border:1px solid #000000;
margin:0px auto;
width:800px;
}
#logo {
position:absolute;
z-index:2;
top:0px;
left:50%;
margin-left:-400px;
font-family:verdana;
font-size:75px;
padding-top:90px;
padding-left:220px;
color:#ffffff;
opacity:0.6;
}
#menu {
border:1px solid #000000;
width:110px;
opacity:0.75;
position:absolute;
z-index:3;
top:20px;
margin-left:5px;
}
#menu a{
color:#000000;
border-right:10px solid #dedede;
background:#cccccc;
border-left:10px solid #aaaaaa;
border-bottom:1px solid #000000;
margin-bottom:0px;
padding:5px;
font-family:verdana;
font-size:13px;
width:80px;
display:block;
text-decoration:none;
}
#menu a:hover{
opacity:0.5;
text-decoration:underline;
}
.cut{
height:1px;
width:100%;
background:#ffffff;
}
#rightmenu{
width:130px;
float:right;
background:#ffffff;
border-top:1px solid #000000;
padding:10px;
padding-top:12px;
border-left:1px dashed #cccccc;
}
#content{
border-top:1px solid #000000;
width:558px;
padding:20px 46px 4px 46px;
background:#ffffff;
line-height: 16px;
}
h1{
font-size:28px;
margin:0px;
border-bottom:1px solid #a0a0a0;
padding-bottom:10px;
font-weight:normal;
}
h2{
font-size:22px;
margin:0px;
border-bottom:1px solid #a0a0a0;
font-weight:normal;
padding-bottom:6px;
}
h3{
font-size:16px;
margin:0px;
border-bottom:1px solid #a0a0a0;
font-weight:normal;
padding-bottom:6px;
font-family: verdana;
line-height: 16px;
}
p{
font-size:12px;
padding: 0px 5px;
margin-top:4px;
}
#bottom{
text-align:center;
color:#999999;
}

Indlæg senest redigeret d. 04.04.2008 22:28 af Bruger #10113

6 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #11328 @ 04.04.08 22:26

1.323

1:

har du sat en margin på?
ellers så husk:

Kode

*
{
margin: 0px;
padding 0px;
}

i din CSS

2: No Idea... CSS er ikke noget man skal have ligende på serveren el. lign....

Jeg må sige at det ser rigtig flot ud!
Kan godt lide ideen med at have et "hovedbillede" på hver side...

Indlæg senest redigeret d. 04.04.2008 22:28 af Bruger #11328

Bruger #5620 @ 05.04.08 07:42

1.500

2. klikker på more options og vælger css level 3 i dropdown menuen?

3. du kan sætte baggrunden på den div som begge er i til hvid, og contents højre kant til det samme som menues venstre kant, sætte menuen højre margin til -1 og gøre den 1 pixel bredere.

css:

Kode

#mainframe{
border:1px solid #000000;
margin:0px auto;
width:800px;background:#ffffff;
}
#rightmenu{
width:131px;
float:right;
background:#ffffff;
border-top:1px solid #000000;
padding:10px;
padding-top:12px;
border-left:1px dashed #cccccc;
margin-left:-1px;
}
#content{
border-right:1px dashed #cccccc;
border-top:1px solid #000000;
width:558px;
padding:20px 46px 4px 46px;
background:#ffffff;
line-height: 16px;
}

og det her skal være bunden af din html

Kode

</div><div style="clear:both"></div></div>
<div id="logo" title="Artik">Artik</div>
<div id="bottom">Copyright by din fætters onkel</div>
</body></html>

PS din side ser helt forkert ud i IE både med din egen og den kode jeg foreslog

Bruger #13010 @ 13.04.08 00:44

440

Hvis du laver et direkte link til en CSS validator og du gerne vil have den til at vælge CSS3 uden du skal vælge OPTIONS og CSS3 så kan du skrive sådan her :

http://jigsaw.w3.org/css-validator/validator?uri=http://mentos.homepage.dk/scooterhjemmeside/css/stylesheet.css&profile=css3

Læg mærke til &profile=css3 sidst i linket.

Bruger #10113 @ 05.04.08 16:50

147

Tusind tak. Nr var jo ganske enkel. Jeg endrede lidt i Nørdens kode og så fik jeg nr 3 til at virke. Så nu mangler jeg kun det første problem.

Jeg ved at godt at den ser underlig ud i IE, men det gider jeg ikke at tage mig af lige nu.

Bruger #5620 @ 05.04.08 18:13

1.500

1. Den eneste løsning jeg kunne komme til
<img src="Artik_files/logo.jpg" alt="Artik" title="Artik" style="float:left;"><div style="clear: both;"></div>

Bruger #10113 @ 05.04.08 19:33

147

Tusind tak for det, nu virker det hele

Men jeg kunne stadig godt tænke mig at høre hvad i syntes om designet.

Lidt hjælp til min kode

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler