Noen css-relaterte spørsmål

Tha_Zaynt · 2. desember 2004

Jeg har 2 spørsmål: Hvordan får jeg borderen til venstren til å gå helt ned til bunnen og hvorfor blir det et brudd på borderen nå jeg setter inn et <h2> element ?

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nisselink</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="wrap">

<h1>Nisselink</h1>

<ul id="menu">

	<li><a href="?page=hovedsiden">Hovedsiden</a></li>
	<li><a href="?page=info">Info</a></li>
	<li><a href="?page=crew">Crew</a></li>
        <li><a href='?page=minside'>Min Profil</a></li>
	<li><a href="?page=registrering">Registrering</a></li>
	<li><a href="?page=priser">Priser</a></li>
	<li><a href="?page=kontakt">Kontakt</a></li>
</ul>

 <div id="content">
Hei, og velkommen til nisselinks hjemmesider!  </div>
</div>

</body>
</html>

style.css

body {
background: url(images/back.png);
margin: 0;
padding: 0;
text-align: center;
}

h1 {
background: url(images/top.png) no-repeat 19px 100%;
font-size: 1px;
height: 151px;
margin: 0;
padding-top: 20px;
text-indent: -9999px;
width: 704px;
}

html, body {
height: 100%;
}

#content {
border-left-color: #B8C0D4;
border-left-style: solid;
border-left-width: 1px;
color: #999999;
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 170%;
margin-left: 201px;
padding: 0 20px 10px 20px;
text-align: left;
}

#content p {
margin: 0;
padding: 0 0 1.5em 0;
}

#menu {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 20px 0 0 28px;
}

#menu a {
background: url(images/link.png) no-repeat 0px 0px;
color: #94A2BC;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
height: 23px;
margin-bottom: 4px;
overflow: hidden;
padding: 7px 0 0 15px;
text-align: left;
text-decoration: none;
width: 136px;
}

#menu a:hover {
background: url(images/link.png) no-repeat 0px -30px;
color: #96777A;
}

#menu li {
display: inline;
}

#wrap {
background: url(images/background.png) repeat-y;
height: auto !important;
height: 100%;
margin: 0 auto;
min-height: 100%;
width: 704px;
}

form {
margin: 0 40px 1em 0;
}

textarea, input {
font-family: "trebuchet MS", tahoma, arial, helvetica;
border: 1px solid #B8C0D4;
margin-bottom: 1em;
background: #FFF;
padding: 2px;
color: #555;
}

Haraldson · 2. desember 2004

Det vil jo si at du har begynt å kode en del? Post heller en link til resultatet så langt, mye enklere å hjelpe da i forhold til å se et bilde.

Om du ikke har prøvd det kan du bare sette bildet med bordere + hvitt i body, midtstille det samt repetere det nedover.

Tha_Zaynt · 2. desember 2004

her er url til siden: link

Haraldson · 2. desember 2004

Slenger du på et h2-element også, slik at jeg får sett problemet?

Angående borderen - den er da 100% den.

Tha_Zaynt · 2. desember 2004

Slenger du på et h2-element også, slik at jeg får sett problemet?

Angående borderen - den er da 100% den.

hvis du trykker på noen av linkene kommer det opp en error 404 som er skrevet i et <h2> element.. Borderen er 100% til meg...hverken i FF eller opera...eller Ie for den saks skyld...

Haraldson · 2. desember 2004

Det at borderen bryter kommer av marginen på h2-elementet. Sett den til 0, evt. bruk padding for å øke avstanden over h2.

Tenkte først på feil border, jeg.

Endret 2. desember 2004 av Mr.Berg

Tha_Zaynt · 2. desember 2004

satte margin 0 på h2 -elementet og det funka, men hvordan løser jeg problemet med borderren?

FuLu · 2. desember 2004

Noe som er blitt nevnt mange ganger Faux columns

Du kan jukse så du får en "border" strek til å strekke jeg helt ned.

Haraldson · 2. desember 2004

Hos meg ser ting fint ut. Du har ikke lyst til å forklare hva som er feil - litt bedre?

Aha. Henger fortsatt ikke helt med. (Skjønte det nå, altså.)

Endret 2. desember 2004 av Mr.Berg

Tha_Zaynt · 2. desember 2004

Hos meg ser ting fint ut. Du har ikke lyst til å forklare hva som er feil - litt bedre?

hvis du ser på bildet jeg la ved ser du hvordan det ser ut hos meg..

Skal se på faux-colums...har vært borti det før ja når du nevner det..

Endret 2. desember 2004 av Tha_Zaynt

Tha_Zaynt · 2. desember 2004

sånn er koden nå, men borderen blir foflyttet 1 pixel til høyre IE dessuten blir borderen lengre enn skjermbildet..noe som gjør at jeg må scrolle ned til bunnen...det funker forresten ikke i FF heller:

#content {
   height: 98%;
min-height: 98%;
   background: url(images/border.png) repeat-y;
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 14px;
color: #999;
line-height: 170%;
margin-left: 201px;
padding: 0 20px 10px 20px;
text-align: left;
}

FuLu · 2. desember 2004

Det du gjør, er å redigere bilde som du bruker i #wrap og inkluderer den border-streken i det bildet. Da trenger du heller ikke enda et bilde i #content og du trenger og da heller ikke min-height og height i #content.

Tha_Zaynt · 2. desember 2004

ahh...selvfølgelig...men hvordan gjør jeg det hvis jeg ikke vil ha borderen _helt_ ned da? Legger til en footer med clear both?

Logg inn

Noen css-relaterte spørsmål

Anbefalte innlegg

Tha_Zaynt

Videoannonse

Haraldson

Tha_Zaynt

Haraldson

Tha_Zaynt

Haraldson

Tha_Zaynt

FuLu

Haraldson

Tha_Zaynt

Tha_Zaynt

FuLu

Tha_Zaynt

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer