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
KimS

KimS

Skrevet
  • Forfatter
Skrevet

Hehe, vet at ikke fargevalget er det beste, men siden er kun laget for øving med CSS og teste CuteNews. Foreløpig er jeg fornøyd med Cutenews, siden det er veldig lett og sette inn i siden, men jeg har ikke fått testet det noe veldig enda ;)

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...