Gå til innhold

Problem med linker i inne i en <div>

Reiten

Anbefalte innlegg

Reiten

Reiten

Skrevet
Skrevet

Jeg et problem med en webside jeg holder på å lage. Jeg er ganske ny når det gjelder html og css, men har fått lært meg det grunnleggende i alle fall.

 

Problemet er at linker som jeg putter inn i innholds "diven" ikke følger margene som jeg har deffinert. Det synes jeg er ganske rart siden margene også skal gjelde for linker i følge koden min. (som sagt er jeg ganske nybegynner, så det er sikkert noe jeg har gjort feil en eller annen plass.

 

Det hadde vært til stor hjelp om noen kunne finne en løsning på problemet mitt.

 

 

 

Bilde av siden:

 

140293.jpeg

 

 

 

Her er html koden:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

<html>

 

<head>

 

<title> Ironisk.net </title>

 

<link href="stil.css" type="text/css" rel="stylesheet">

 

 

</head>

 

<body>

 

<div id="wrapper">

 

 

 

 

<div id="header">

 

 

 

 

 

</div>

 

 

<div class="meny">

 

<ul type="square">

<li><a href=http://www.travian.no/> Hjem </a></li>

<li><a href=http://www.travian.no/> Om oss </a> </li>

<li><a href=http://www.travian.no/> Tester </a></li>

<li><a href=http://www.travian.no/> Samfunnet</a></li>

<li><a href=http://www.travian.no/> Vi diskuterer</a></li>

<li><a href=http://www.travian.no/> Ingenting</a></li>

</ul>

 

</div>

 

 

 

 

<div class="innhold">

 

 

 

<h1> Hovedsiden </h1>

 

<h2> Nå er siden endelig oppe </h2>

 

 

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pulvinar commodo magna. Vestibulum facilisis felis eu tellus. Proin at sapien.

Pellentesque placerat lorem in leo. Proin nec lorem id dui tincidunt lobortis.

Pellentesque massa mauris, auctor lobortis, blandit ac, ullamcorper ac, massa. Sed a magna non ipsum tincidunt condimentum.

Curabitur ac magna.

Etiam interdum sapien non felis. Donec eu augue vel felis vehicula porta.

Suspendisse metus quam, tincidunt vitae, facilisis a, commodo vitae, justo.</p>

 

<a href="fdfdfd.htm"> Les mer </a>

 

 

 

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pulvinar commodo magna. Vestibulum facilisis felis eu tellus. Proin at sapien.

Pellentesque placerat lorem in leo. Proin nec lorem id dui tincidunt lobortis.

Pellentesque massa mauris, auctor lobortis, blandit ac, ullamcorper ac, massa. Sed a magna non ipsum tincidunt condimentum.

Curabitur ac magna.

Etiam interdum sapien non felis. Donec eu augue vel felis vehicula porta.

Suspendisse metus quam, tincidunt vitae, facilisis a, commodo vitae, justo.</p>

 

</div>

 

 

 

<div id="footer">

 

</div>

 

 

</div>

 

 

</body>

 

</html>

 

 

 

 

 

Her er css koden:

 

 

 

body {background:#1A1A1A;}

 

{margin: 0; padding: 0; list-style-type: none; border: none; }

 

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:visited {

color: #FFFFFF;

text-decoration: none;

}

 

a:active {

color: #FFFFFF;

text-decoration: none;

}

 

a:hover {

text-decoration: underline;

}

 

 

div#wrapper {

padding-bottom: 30px;

margin: 0 auto;

width: 700px;

}

 

 

#header {

width: 749px;

height: 178px;

padding-top: 30px;

padding-bottom: 0px;

background: url(images/header.gif);

}

 

 

.innhold {

padding-bottom: 10px;

padding-top: 10px;

auto: 400px;

width: 749px;

background: url(images/bg_innhold.gif);

}

 

.meny {

font-family: arial black;

position: absolute; left: 273px; top: 200px;

color: white;

line-height:220%;

font-size: 110%;

}

 

#footer {

width: 749px;

height: 60px;

background: url(images/footer.gif);

}

 

h1, h2,h3, p, a.innhold {

color: #FFFFFF;

font-family: arial;

margin-top: 12px;

margin-left:223px;

margin-right: 30px;

padding-bottom: 0px;

}

 

 

 

Videoannonse

Videoannonse
Annonse
Reiten

Reiten

Skrevet
  • Forfatter
Skrevet

Takk skal du ha Bjorshol :)

 

Stian Jacobsen: Jeg skjønner at jeg skulle ha skjønt hva som var feil, eller "rett" som du sier. Men det gjør jeg dessverre ikke :blush:

 

Ang. rotete css. Jeg har lagt til komentarer, sånn at det blir lettere å forstå hva som står for hva. Ble den mindre rotete nå? (hvis det var det du mente med at den bare var et rot Bjorshol):

 

 

/*Bakgrunn*/

 

body {background:#1A1A1A;}

 

/*Nullstiller nettleserforskjeller*/

 

{margin: 0; padding: 0; list-style-type: none; border: none; }

 

/*Linker*/

 

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:visited {

color: #FFFFFF;

text-decoration: none;

}

 

a:active {

color: #FFFFFF;

text-decoration: none;

}

 

a:hover {

text-decoration: underline;

}

 

 

/*Header, Innhold, Footer*/

 

/*Hele siden*/

 

div#wrapper {

padding-bottom: 30px;

margin: 0 auto;

width: 700px;

}

 

/*Header*/

 

#header {

width: 749px;

height: 178px;

padding-top: 30px;

padding-bottom: 0px;

background: url(images/header.gif);

}

 

/*Innholdet*/

 

div.innhold {

padding-bottom: 10px;

padding-top: 10px;

auto: 400px;

width: 749px;

background: url(images/bg_innhold.gif);

}

 

/*Footer*/

 

#footer {

width: 749px;

height: 60px;

background: url(images/footer.gif);

}

 

 

/*Instillinger for tekst etc.*/

 

/*Innstillinger for tekst inne i innholdsboksen*/

 

h1, h2,h3, p, a.innhold {

color: #FFFFFF;

font-family: arial;

margin-top: 12px;

margin-left:223px;

margin-right: 30px;

padding-bottom: 0px;

}

 

/*Posisjonering av menyen*/

 

.meny {

font-family: arial black;

position: absolute; left: 273px; top: 200px;

color: white;

line-height:220%;

font-size: 110%;

}

 

 

øl_i_tastaturet

øl_i_tastaturet

Skrevet
Skrevet

Bare hyggelig det.

 

Det jeg mente med rotete css, var at du har satt opp siden din helt feil.

Du har brukt position:absolute på å plassere menyen osv. Definer bredder og float de istedet. :) Mye annet som er feil her også, som jeg ikke orker å ramse opp i nå.

Reiten

Reiten

Skrevet
  • Forfatter
Skrevet

Som du ser er jeg ikke så veldig god i css, så jeg vet ikke helt når jeg skal bruke hva. (hvis du skjønner) Har satt float på menyen nå, det funket mye bedre :thumbup: Men jeg skjønner ikke helt hva du mener med og definere bredder. Mener du f.eks 

.meny {width: 100px}

 

Jeg hadde satt stor pris på om du kunne ha gått gjennom koden hvis du har litt tid til overs, sånn at jeg kunne ha rettet opp det som er feil. Det hadde gjort slutt resultatet mye bedre.

Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet

btw, dette fungerer ikke

/*Nullstiller nettleserforskjeller*/
{margin: 0; padding: 0; list-style-type: none; border: none; }

1. Du har ikke spesifisert hvilke elementer dette gjelder for

2. Dette nullstiller absolutt ikke nettleserforskjeller

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
text-decoration: none;
vertical-align: baseline;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...