Hjälp med css-layout

HEJ!

Jag önskar hjälp med css, har plockat ihop diverse saker jag behöver, men får inte ihop det helt, (=alls?) utan er hjälp!

http://member.webforum.nu/5316/default.htm

De svängda hörnen har jag problem med, har tittat på några exempel, men de är för alla hörn, det borde finnas lämpligare sätt?

Menyn ska sträcka sig hela vägen ned, vilken height/max-height borde åstadkomma, men det gör det inte ändå.

h blir betydligt större i IE än i FF, hur kommer det sig?

Varför hoppar första LI in ett hack?

Övriga råd mottages också tacksamt, har säkert fel på float, relative och block på ett antal ställe. :stud

Skickar även med skiss på hur det är tänkt att se ut.

J.N. skrev:

Varför hoppar första LI in ett hack?

#topmenu ul{
	list-style: none;
	display: inline;
	font: bold 1.4em Verdana;
	[B]padding:0;[/B]
}

HEJ!

Det är #leftmenu ul som ger indraget, du skrev nog fel class? I vilket fall ger det ingen skillnad när jag placerar den på rätt ställe.
(I topmenu minskar den paddingen till vänster om menyn.)

Har uppdaterat css:et med din justering.

Ja du, det var väl inte en helt lätt design att ta tag i (tycker jag).
Men med en snabb koll så kan jag se att ska du ändra leftmenu ul till display:block;, för att få bort indraget, men då kommer din andra kodning att synas och/eller bli fel. Du har en bakgrundsfärg där som också har visats lite olika kan jag tänka mig. Så får jag en känsla av att din logga kanske kan bli dold.
Men om du nu vill att divarna ska ligga "absolut" i sället för t.ex float så får du pilla och flytta saker, som du vill ha det.
Att dina h ser annorlunda ut beror på att de är i storlek em, och då visas de i förhållande till din egen inställning av textstorlek på datorn. IE smallest och ff normal, brukar ligga ganska nära varandra när det gäller h, men då blir 10px på texten väldigt liten i IE.
Du har glömt ; efter dina h också.
Eftersom jag brukar undvika både absolut och margin i största möjliga mån för att slippa hacken, så vill och kan jag inte ge mig in på hela din design.
Runda hörn finns möjlighet att göra med en mäng divar med en eller ett par px i varje div. Tror att det kommer komma bättre lösningar css3 med stöd i flera webbläsare snart.
Så har ff sin egen moz-variant där man räknar radius och jag tror det är den som kommer sedan. ser ut så här om du vill leka med den -moz-border-radius:10px;
Mycke fix och trix är det...:-)

HEJ!

Nu har jag laborerat vidare, kombinerat tvåspalts-layouten http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html med det jag kan, och det blev rätt bra!
http://member.webforum.nu/5316/default.htm

Två problem:
1. Hur får jag bakgrundsbilden att fylla hela vägen ned?
Kan man sätta height, eller är det nytt lager under som gäller?

2. I IE fungerar det väldigt dåligt, såg jag när jag allt var rätt i FF/Opera.
Det var perfekt i IE också tills jag såg att lagerbredder var felräknade, #bottom var rätt. Ökade top.gif respektive #main till samma bredd, med följd att allt sprack!
Vad är det som IE inte förstår, och hur löser man det?

tanten skrev:

Eftersom jag brukar undvika både absolut och margin i största möjliga mån för att slippa hacken, så vill och kan jag inte ge mig in på hela din design.

Hur positionerar du lager en bit in, tex #top har jag margin-left:200px; för att komma förbi logotypen, 200px in?
Jag förstår att det är något sådant jag missat eftersom IE gör fel.

Provade med float:left; och margin-left:10px; för #top, vilket får det rätt i IE, men med padding ovanför i FF (Opera rätt).
Är detta den rättare vägen att gå; jobba med margins till det blir rätt?

Jag har försökt komma underfund om vad det är för bakgrundsbild du menar. Men en bakgrundsbild fyller aldrig upp ett område på egen hand eftersom den inte har någon egen höjd eller bredd. Antingen så följer den med och fyller på bakgrund hos en befintlig text eller så får man ange en height på diven den finns i.

I princip använder jag mig nästan alltid av enbart float och % till allting. När jag då försöker få en layout att fungera med det så försöker jag få det att se någorlunda bra ut i upplösningen 1024 och i 640 med medium/normal i textstorlek. Behöver någon läsa med större text får det spricka, men med float kommer då divarna att lägga sig under varandra och innehållet blir i alla fall tillgängligt för besökaren. Långa ord eller bilder som inte skalas kan peta ut lite här och där, men det får gå, enligt mitt tycke, så länge det inte döljer något annat. Har jag breda bilder så lägger jag dem som bakgrund, så att efekten med att ingen ska behöva scrolla sidledes oavsett bildskärm inte går förlorad, men då får besökarn se väldigt lite av bilden...
Jag slängde i hop en design på samma grund som du gjort, med float och %, men vet ta mig sjutton inte hur man får hit den.
Och så har jag inte kollat den så det finns fömodligen lite tok i den men du kan kanske få något litet tips någonstans, men färgglad är den för att man ska se divarna...! Så jag skickar upp den till himlen i stället, men där kommer den inte ligga så länge. Över helgen eller så...
En del av mr.mainlines meny kom också med :-)
http://www.gotlandssidor.se/tvaspalt.html

Ha nu en jätteskön helg!

J.N. skrev:

Nu har jag laborerat vidare, kombinerat tvåspalts-layouten http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html med det jag kan, och det blev rätt bra!

(y) Håller med. :)

1. Hur får jag bakgrundsbilden att fylla hela vägen ned?

Du lägger den i containern istället och positionerar in den till rätt sidposition.

Genom att sedan "dra ut" #logo i höjdled och fylla den med vit bakgrundsfärg får du logofältet att "lägga sig över" linjen där den inte behövs.

Rundningen tar ju "överkantsbilden" i vänstermenyn hand om (dvs den lägger sig också över och döljer den del av vertikallinjen som inte behövs i övre högra hörnet tack vare att du redan gett den vit bakgrundsfärg)

2. I IE fungerar det väldigt dåligt [...] Vad är det som IE inte förstår, och hur löser man det?

Jadu - det vete f-n, men när jag drog ner bredderna lite på toppmenyn och innehållet blev det rätt... Jag brukar själv testa med att ta till "sådär en 10px moms" mellan kolumnerna eller i högerkanten för MSIE:s skull.

Fenomenet finns dokumenterat nånstans i någon CSS-gurus blogg (typ), men jag kommer inte ihåg var jag fått "inklusive-lite-moms"-informationen nånstans ifrån från början...

Hur positionerar du lager en bit in, tex #top har jag margin-left:200px; för att komma förbi logotypen, 200px in?
Jag förstår att det är något sådant jag missat eftersom IE gör fel.

Det enda du missade var att inte "ta luft" på alla ledder. Jag drog ner menybredden med 10px och så funkade det...

"Float left och width" på den vänstra, och "margin-left + lite moms och width" på den högra brukar göra susen...

Är detta den rättare vägen att gå; jobba med margins till det blir rätt?

"rättare" är väl att ta i, men det funkar :)

Resultat: http://member.webforum.nu/2241/mjau.html

Lycka till med resten nu! :birp