Sitter helt fast i CSS

[porcelaiN]

Hei og hopp!

Siden jeg ikke fikk svar i Webkafeen så kanskje jeg får mer hjelp her

 

Nå driver jeg å lager mitt første tabelløse design (), men da har det selfølgelig(?) dukket opp et problem, faktisk flere problemer.

Jeg får ikke dette helt til nei, det blir faktisk ikke et design i det hele tatt.

Jeg har da skrevet litt kode, men så sitter jeg faktisk helt fast.

 

Designet skal egentlig se sånn ut. Som dere kanskje skjønner så skal den gå 100% ut til sidene.

Men dette sitter jeg igjen med Som imo er ganske ulikt fra sånn det egentlig skal være.

her er direktelink til CSS-fila.

 

Om noen vær så snill kunne ha hjulpet en liten stakkar som meg så hadde jeg blitt evig takknemlig

 

(som sagt jeg er nybegynner, så please ikke slakt meg )

 

På forhånd takk!

edit: Jeg skal endre header, typografi osv. etterhvert, men nå er første prioriten å få opp designet.

[neb]

det er en del ting du må gjøre for å få dette til å se ut som du vil..

 

*
margin: 0;
padding: 0;
}

body{
font-family: verdana, helvetica, sans-serif;
}

div#hoved{
width: 800px;
height: skriv inn det du måtte ønske :);
float: right;
}

div#wrap{
width: 100%;
background: #235679;
}

div#topp {
height: 52px;
width: 100%
top: 0px;
right: 0px;
left: 0px;
background-image: url("header.jpg");
background-repeat: repeat-x;
}

div#bottom {
height: 41px;
width: 100%
bottom: 0px;
left: 0px;
right: 0px;
background-image: url("bottom.jpg");
background-repeat: repeat-x;
}

div#nav{
width: 164px;
float: left;
}

 

Det er sikkert noen feil i denne snutten, men den burde i allefall hjelpe deg litt videre. Har ikke testa det! Så vidt jeg forsto så skal siden være heldekkende i browsern. den skal ikke flyte sentrert? eller tar jeg feil?

 

mvh bigben

Endret 27. januar 2005 av bigben247

[porcelaiN]

Takk

 

Men det virker ikke som at det funker

http://pavlion.net/stian/weblogg/1/index.php

 

.. og ja den skal dekke hele browseren.

Endret 28. januar 2005 av Stish

[Simon Zimmermann]

div#hoved{
width: 100%;
height: auto;
float: right;
}

 

Edit. Forresten, så må du vel lage noe sånn at det repeterer seg i header.

Endret 28. januar 2005 av Waldmeister

[porcelaiN]

Edit. Forresten, så må du vel lage noe sånn at det repeterer seg i header.

Hvordan gjør jeg det da?

Skal teste ut koden du ga meg når jeg kommer hjem.

 

Takk!

Endret 28. januar 2005 av Stish

[porcelaiN]

http://pavlion.net/stian/weblogg/1/index.php Joda, er vel bedre.

Men footer går ikke 100% til siden ikke header heller(skal jeg ta klippe litt av headeren (altså der hvor strekene er) å sette det som bakgrunn i header diven?)

Om dere skjønner

[Simon Zimmermann]

Testet litt, men jeg fikk ikke footer til å være helt i bånn uten å bruke absolutt posisjonering.

 

Du kan jo se hvordan det ble. http://web.acopy.org/hw/stish/hovedside.html

[Aisutora]

100% er ikke valid css informasjon. Så du må nok skrive hvor mange pixler det er istedet. Da tror jeg muligens at teksten stikker der den skal.

[Simon Zimmermann]

100% er ikke valid css informasjon. Så du må nok skrive hvor mange pixler det er istedet. Da tror jeg muligens at teksten stikker der den skal.

Den Validerer fint.

 

100% er så vidt jeg vet helt korrekt.

[Aisutora]

Ok, kansje det bare er jeg som blander med html for der funker ikke 100% lenger ihvertfall. Men det som gjør at teksten din kommer så lant ut er at du har satt

 

div#hoved{

width: 100%;

height: auto;

float: right;

 

}

 

Hvis du derimot bytter ut 100% mot 800px så tror jeg teksten skal flytte seg nokså fint inn der du vil ha den

[joffar]

Ok, kansje det bare er jeg som blander med html for der funker ikke 100% lenger ihvertfall. Men det som gjør at teksten din kommer så lant ut er at du har satt

 

div#hoved{

width: 100%;

height: auto;

float: right;

 

}

 

Hvis du derimot bytter ut 100% mot 800px så tror jeg teksten skal flytte seg nokså fint inn der du vil ha den 

Tror ikke vidde på 800 px vil dekke hele vinduet dersom du har en oppløsning over 800*600...

 

 

CSS filen din har en feil helt øverst..

 

starter med:

margin: 0;

padding: 0;

}

 

du bør vel forandre det til

* {

margin: 0;

padding: 0;

}

 

Header og footer bør vel også legges in som background bilde isteden for eget bilde.

Endret 28. januar 2005 av joffar

[Aisutora]

Det er jeg fult klar over at den ikke vil, men hvis teksten skal passe i designet og ikke slenge seg så mye ut til siden så må wrap div'en ha widt: 800px i og med at det er det bildet er. Ellers ser det bare dumt ut. Og hvis du ikke vil ha den til å ligge til høyre kan du legge til:

 

margin-right:auto;
margin-left:auto;
padding:0px;

 

I hoved div'en. Da blir siden sentrert. Og da må du også ha widt: 800px der.

[joffar]

Det er jeg fult klar over at den ikke vil, men hvis teksten skal passe i designet og ikke slenge seg så mye ut til siden så må wrap div'en ha widt: 800px i og med at det er det bildet er. Ellers ser det bare dumt ut. Og hvis du ikke vil ha den til å ligge til høyre kan du legge til:

 

margin-right:auto;
margin-left:auto;
padding:0px;

 

I hoved div'en. Da blir siden sentrert. Og da må du også ha widt: 800px der.

Hmm da er han vel bedre tjent med å sette div hoved til 800 px, siden wrap er innenfor div hoved vil den med vidde 100% kun gå ut til div hoved.

 

Forresten så trenger vel ikke hoved div float heller. da er det vel bedre med position: relative;

 

for å pirke litt... margin:{auto 0 auto 0;} er bedre med hensyn til filstørrelen på CSS filen..

[porcelaiN]

Nå er jeg litt forvirret her.

Kan noen gi meg koden jeg skal bruke?

[halvardm]

Dette er hele koden du skal ha:

Fjern alt du har og legg inn dette.

Det funket ihvertfall i Firefox.

 

Problemet ditt var at du hadde satt 100% bredde noe som ikke "går" siden da må du begynne å repeate header og footer og det hadde bare sett dumt ut. Bredden din skulle vært fast på 800px

 

 

EDIT: Ser at du har fått veldig mange forskjellige tips over her og du burde prøve å forklare deg bedre. Vil du ha 100% bredde eller vil du ha en fast bredde? Dette burde du si, jeg trodde du ville ha fast bredde etter å se på det bildet du gav, men noen har mistforstått tror jeg.

 

* {
margin: 0;
padding: 0;
}

body{
font-family: verdana, helvetica, sans-serif;
}

div#hoved{
width: 100%;
height: auto;
float: right;

}

div#wrap{
width: 800px;
background: #235679;
}

div#topp {
height: 52px;
width: 800px;
top: 0px;
right: 0px;
left: 0px;
background-image: url("header.jpg");
background-repeat: repeat-x;
}

div#bottom {
height: 41px;
width: 800px;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url("bottom.jpg");
background-repeat: repeat-x;
}

div#nav{
width: 164px;
float: left;
}

Endret 29. januar 2005 av Skomaker

[porcelaiN]

@Skomaker:

Tusen takk for kodene, og takk til alle andre som har hjulpet meg

 

Ja, jeg burde kanskje forklare lit bedre, men jeg har sagt at den skal dekke hele browseren, ergo 100%.

 

Igjen takk!

Skal teste den når jeg kommer hjem fra LANet.

Endret 29. januar 2005 av Stish

[halvardm]

Er det 100% du skal ha er koden min feil, men da må du huske å få headeren og footeren til å repetere sidelengs. Ellers må du huske

* {
margin: 0;
padding: 0;
}

 

....i stedet for det du har nå:

margin:0;
padding: 0;
}

[porcelaiN]

Jepp.

Men jeg vil jo ikke at headeren skal repeteres flere ganger, altså at «WEBLOGG-teksten» skal stå flere ganger. Så finnes det en kodesnutt for å legge til en bakgrunn-nr2?

 

Jeg vil altså at denne skal være bakgrunn etter headeren.

 

Var kanskje litt dårlig formulert, men bare spør ivei om dere ikke fortstår helt

[FuLu]

Du kan ta en titt på HTML, CSS som jeg satte sammen for deg her. Nå er ikke innholdet delt opp i to kolonner (så du får en "meny" til venstre), men det kan vel lett puttes inn hvis du vil. Gir deg bare en liten spark på hvordan det kan gjøres.

 

http://home.chello.no/alexholm/hw.no/help1/

[schjell]

Du bør sette den topp diven med det bakgrunnsbildet du vil ha...så kan du legge det andre bilder (header.jpg) inn i div. Da får du den effekten du ønsker...

 

Css dokumentet bør da se slik ut..

 

/* CSS Document */
* {
margin: 0;
padding: 0;
}

body{
font-family: verdana, helvetica, sans-serif;
}

div#hoved{
width: auto;
height: auto;
float: right;

}

div#wrap{
width: auto;
background: #235679;
}

div#topp {
height: 52px;
width: auto;
top: 0px;
right: 0px;
left: 0px;
background-image: url("head_bg.jpg");
background-repeat: repeat-x;
}

div#bottom {
height: 41px;
width: auto;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url("bottom.jpg");
background-repeat: repeat-x;
background-position: bottom;
}

div#nav{
width: 164px;
float: left;
}

 

Og videre bør php fila di inneholde dette:

 

<body>
<div id="topp"><img src="header.jpg"></div>
<div id="hoved">
<div id="wrap">
Litt tekst

<div id="bottom"></div>
</div>
</div>
</body>

 

Dette virket hos meg i Firefox så jeg håper det løser problemet hvis jeg har forstått problemet ditt riktig.