Avatar billede simon76 Praktikant
02. november 2003 - 14:06 Der er 21 kommentarer og
1 løsning

Css hjælp!

Hej,
jeg sidder og piller lidt med et stylesheet til min hp, men er rendt ind i et par små problemer:

1. Teksten i content rykker sig et skridt til venstre.
2. Kan ikke få footer til at holde sig i bunden samtidig med at der er mellemrum mellem den og content.

Se: www.bjaerre.dk/test/problem.htm
Avatar billede skovenborg Nybegynder
02. november 2003 - 14:21 #1
1. I dit stylesheet under #content siger du:
padding:10px;

Det rykker teksten 10px fra alle sider. Du kan så tilføje:
padding-left:0px;

Så burde teksten ikke rykke sig
Avatar billede bearhugx Nybegynder
02. november 2003 - 14:28 #2
det problem som du har simon er en bug i IE's rendering engine, som gør at der kommer en 3 px forskubning, hvis man har en float ved siden af...

Jeg har engang hørt noget om at man kunne undgå denne ved at sætte en Strict Document type

hvis du bruger HTML 4.01 så indsæt følgende forrest i filen :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
....
</html>

/Søren
Avatar billede simon76 Praktikant
02. november 2003 - 14:28 #3
Det løser desværre ikke problemet, det rykker bare teksten over i venstre side, der er stadig et lille ryk i venstre side.
Avatar billede bearhugx Nybegynder
02. november 2003 - 14:31 #4
er det skovenborg eller mig, du taler til der ?

PS: der er ikke noget indryk i Mozilla--- Men derimod, så går midter-contentet "ud over" den hvide kasse, som der er afsat...
Avatar billede simon76 Praktikant
02. november 2003 - 14:32 #5
@ bearhugx
Det hjalp heller ikke... I hvert fald ikke når jeg tester det lokalt på min pc.. Kan jeg undgå at bruge float og stadig have samme funktion med menuboksene?
Avatar billede bearhugx Nybegynder
02. november 2003 - 14:35 #6
nope... Men du skal vide med hensyn til den indrykning, at det i princippet ikke er din CSS der er noget i vejen med - men mere en fejl i IEs måde at vise det på...
Avatar billede bearhugx Nybegynder
02. november 2003 - 14:35 #7
Ikke andet end at man kan "begå selvmord" og vende tilbage til et tabel-orienteret layout *og det har jeg aldrig sagt! :-)*
Avatar billede simon76 Praktikant
02. november 2003 - 14:36 #8
@ bearhugx
Shit! det med mozilla havde jeg ikke opdaget. Det er nok fordi jeg har sat "height 500px" på min #frame, for at den ikke skal klappe helt sammen hvis der ikke er tekst i #content.
Avatar billede skovenborg Nybegynder
02. november 2003 - 14:41 #9
det kan typisk løses ved at bruge min-height:500px;

men så kommer problemmet at den understøtter IE ikke - så det bliver noget være rod.
Avatar billede skovenborg Nybegynder
02. november 2003 - 14:45 #10
angående dit første spørgsmål må jeg have misforstået det. Jeg havde nok ikke lige set den lille 3px store indrykning som bearhugx taler om.
Avatar billede bearhugx Nybegynder
02. november 2003 - 14:48 #11
men er det ikke således at en div vil tilpasse sin højde til evt interne block-elementer (med mindre man sætter overflow:clip) --- på sider med lidt content  vil del selvfølgelig "klappe sammen" med den vil justere sig for sider med meget content...

Under alle omstædingheder, så laver du noget juks, med dit content, for der er 4 div's som alle har ID'en Content - og da ID bruges til en unik identifikation, så dutter det ikke.. du skal bruge class i stedet for...
Avatar billede bearhugx Nybegynder
02. november 2003 - 14:49 #12
evt sørge for at den float, som holder menuerne altid min. er på 500px...
Avatar billede simon76 Praktikant
02. november 2003 - 14:55 #13
@ bearhugs
Nu går det meget hurtigt!...:-)
Jeg er ikke så skarp til det her css, så det kniber lidt med at følge med dig. Jeg kigger lige på det med ID & CLASS.
Avatar billede skovenborg Nybegynder
02. november 2003 - 14:55 #14
mozilla (og opera) tager en højde for en højde - og er ligeglad med om indholdet er for stort. Det er så her hvor min-height kommer ind i billedet.

overflow:clip er der forresten ikke noget der hedder hvis man går ud fra standarden.
Avatar billede simon76 Praktikant
02. november 2003 - 16:05 #15
Nå, nu fik jeg rettet id og class fejlene og jeg har fået footeren til at blive hvor den skal i IE (i mozilla dur det ikke helt og footeren er blevet for kort).
Nu er der bare et nyt problem: Hvis ikke #frame bliver høj nok forsvinder #rightcol i IE..

Kan det overhovedet lade sig gøre at gøre alle browsere glade?
Avatar billede skovenborg Nybegynder
02. november 2003 - 17:39 #16
ja, det er svært at gøre browserne glade. Men du kan starte med at oprette en doctype i dit dokument. Det er nemlig vigtigt for IE at du har det for at forstå CSS'en ordentligt. Du kan fx bruge:
<!DOCTYPE html "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Det skaber dog nogle flere problemmer med din nederste copyright bar og din content. #content skal du ændre til det her:
#content {
    margin:10px 160px 20px 160px; /*bestemmer afstanden mellem left-content-right*/
    min-width:300px;
    background-color:none;/*#F2F2F2;*//*#FFFFFF;*/
}
altså ændre bundmargenen.
Din address som du bruger til din copyright-boks er temmelig fyldt med fejl, som du kan ændre sådan her:
address {
    width:700px;
    position:absolute;
    bottom:0px;
    left:10px;
    background:#F2F2F2;
    border-left:1px solid #C2C2C2;
    border-top:1px solid black;
    border-right:1px solid #C2C2C2;
    border-bottom:1px solid black;
    margin-top:10px;
    margin-bottom:5px;
    text-align:center;
    font-style:normal;
    font-size:12px;

}

Du mangler først og fremmest enheder, samt at du glemmer position - ellers dur left og bottom ikke.
Avatar billede skovenborg Nybegynder
02. november 2003 - 17:43 #17
og et par ting til:
background-color:none; er der ikke noget der hedder - du kan derfor enten sætte den til white eller transparent - det giver samme effekt.

I din html-kode skriver du desuden også:
</div id="content"> hvilket er noget unødvendigt vrøvl - bare skriv </div>.
Avatar billede bearhugx Nybegynder
02. november 2003 - 17:57 #18
skovenborg >> ang. overflow .. Det er rigtigt - jeg tænkte i andre tanker der -- Det hedder overflow:hidden --- Men resultatet er at indholdet bliver clipped, hvis det overskrider de grænser, som containing block anviser....
Avatar billede simon76 Praktikant
02. november 2003 - 19:20 #19
Hej igen..
Tak for den rigtig gode hjælp..

Hvis i vil have lidt point så lav et svar..

Hov.. lige en ting til:
Jeg har ikke brugt doctype og andre ting i toppen af min hjemmesider før, er der andre vigtige ting jeg skal have med?

Mvh Simon
Avatar billede skovenborg Nybegynder
02. november 2003 - 21:03 #20
svarer lige (skal vi ikke dele bearhugx!?!)

den her forventer w3c-validatoren du skal have (medmindre du bruger xhtml så kan du skrive det et andet sted):
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

bruges vist nok også af søgemaskiner som google. Er dog ikke helt sikker...
Avatar billede skovenborg Nybegynder
02. november 2003 - 21:03 #21
svarer lige helt rigtigt ;-)
Avatar billede simon76 Praktikant
04. november 2003 - 14:58 #22
Endnu engang, tak for hjælpen..

Der kom aldrig noget svar fra bearhugx, så skovenborg får point...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB

Capgemini Danmark A/S

Client Partner

KMD A/S

Projektleder

Politiets Efterretningstjeneste

IT-løsningsarkitekt i PET

Politiets Efterretningstjeneste

AI/ML udvikler i PET