Gå til innhold

Hjemmeside / Blogg Prosjekt

KimS

Av KimS
i Programmering og webutvikling

Anbefalte innlegg

KimS

KimS

Skrevet
Skrevet

Ok, det har blitt en del av topic'er av meg i dag mens jeg har jebbet med siden min.

Så nå velger jeg å holde mine spørrsmål i en tråd ;)

 

Jeg har jobbet litt med CSS'en nå:

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #E8E8E8;

margin: 1em;
padding: 0;
}


/* DIV */

#headertop {

background-color: #00E900;
height: 30px;
width: 610px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;

#header {

background-color: #00E900;
height: 458px;
width: 610px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;

}

 

Så langt har jeg kommet. #headertop skal jeg ha som en liten kant før selve headeren, mens #header skal være selve headeren. Et ganske stort bilde som jeg legger inn som backgound-image. Men problemet mitt er hvordan jeg må legge dette in i html filen for å få #headertop og #header under hverandre. Nå er det kun #headertop som vises.

Noen som har løsningen?

 

- Kim

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
KimS

KimS

Skrevet
  • Forfatter
Skrevet (endret)

Så at jeg hadde glemt å avslutte ja, det fikk slutt på problemet :)

 

Men når et problem løser seg, så kommer det ofte nye...

Sånn ser siden min ut så langt: kim.nux.no

Problemet jeg har nå er padding på teksten i #main. Når jeg legger inn padding holder teksten samme plass, og selve #main blir breiere.

 

Slik ser CSS koden ut nå:

body {
font-family: arial, helvetica, sans-serif;
font-size: 17px;
color: #E8E8E8;
background-color: #E8E8E8;

margin: 1em;
padding: 0;
}


/* DIV */

#headertop {
background: #00E900 url(img/hbg2.jpg) no-repeat;
height: 258px;
width: 610px;
margin: 0 auto;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
border-bottom: 2px solid;
}

#main {
background-color: #00E900;
min-height: 600px;
height: auto !important; /*prioriteres av opera og FF osv*/
height: 600px; /*ignoreres av opera osv, leses av IE*/
/*IE tolker height som min-height */
width: 610px;
margin: 0 auto;
border-top: 2px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
}

 

Noen som ser hva jeg gjør galt?

 

- Kim

 

PS: JEg har ikke rukket å se noe på hvordan man endrer på skrift å linker i cutenews, hvis noen hvet det, så sleng med det også ;)

 

Edit: Endret lenke og la til PS.

Endret av KimS
Lenke til kommentar
Amnio

Amnio

Skrevet
Skrevet

For å løse problemet ditt med avstanden mellom teksten og kanten av designet må du se grundigere på tabellstrukturen din. Enkleste fiksen er vel å legge til en høyere verdi under cellpadding for tabellen.

 

Et par andre ting jeg kom over i farta:

 

Fiks for de resterende validasjonsfeilene. Gjør om head til 

	<head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
 <title>KimS - Step by Step...</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

Når det gjelder CSSkoden din kan du godt gjøre om den til:

body {
font-family: arial, helvetica, sans-serif;
font-size: 17px;
color: #E8E8E8;
background-color: #E8E8E8;
/*fjernet
margin: 1em;
padding: 0;
*/
}


/* DIV */

#headertop {
background: #00E900 url(img/hbg2.jpg) no-repeat;
height: 258px;
width: 610px;

/*La til:*/
margin: 2px auto;
margin-top: 9px;

/*fjernet
margin: 0 auto;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
border-bottom: 2px solid;
*/
}

#main {
background-color: #00E900;
min-height: 600px;
height: 600px; /*ignoreres av opera osv, leses av IE*/
/*IE tolker height som min-height */
width: 610px;

/*La til:*/
margin: 0 auto;
margin-top: 4px;

/*Fjernet
height: auto !important; /*Med/uten denne linja i IE, Opera og FF gav ingen forskjell*/
border-top: 2px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
*/
}

Uten at dette forandrer på utseende på siden din.

Lenke til kommentar
Amnio

Amnio

Skrevet
Skrevet
Men disse bordene vil jeg gjerne ha, når jeg tenker vidre ut i designet kan det hvere jeg vil ha de der , går dette bra?

Skulle ikke være noe problem det. De hadde bare ikke noen funksjon i det nåværende designet da de hadde samme farge som bakgrunnen. Derfor hadde jeg de ikke i kodeeksemplet over.

Lenke til kommentar

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
×
×
  • Opprett ny...