WN - Akut problem med html/css

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Akut problem med html/css (https://www.wn.se/forum/showthread.php?t=1051305)

editman

2011-12-05 23:03

Akut problem med html/css

har ett problem med html/css där jag vill centrera sidan och få en vit bakgrund på följande tag: #main-content-wrapper

får det inte att fungera och skulle uppskatta all hjälp...

Sidan går att se på www.designinstitutet.se
Anv namn: test
Lösen: pass2011

(Sidan är döljd)

Alla förslag välkomnas varmt! ;)

MKÖ	2011-12-06 01:11

Kan inte css. prövat att googla?

Silodon

2011-12-06 01:28

Citat:

Ursprungligen postat av MKÖ (Inlägg 20426314)

Kan inte css. prövat att googla?

Givande inlägg...

Jag vet inte riktigt hur jag ska förklara. Men problemet för dig är att allting som ligger i #main-content-wrapper svävar så att #main-content-wrapper fäller ihop sig och ligger överst på sidan 0px hög utan någonting som trycker ut den.

Lägg till följande sist i #main-content-wrapper för att åtgärda problemet:

<div style="clear:both"></div>

Cosma

2011-12-06 11:02

Tycker jag att du ska undvika att låta element flyta som din "header-holder". Bara att användas när det behövs eller ska användas.

Om du har element som använder float, följ mitt exempel så slipper du massa problem:

Kod:

<div id="wrapper" class="cf">

        <div class="floatLeft">Jag flyter till vänster</div>

        <div class="floatRight">Jag flyter till höger</div>

</div>



/** CSS - Micro clearfix hack from http://nicolasgallagher.com/micro-clearfix-hack/ **/



/* For modern browsers */

.cf:before,

.cf:after { content:"";  display:table; }

.cf:after { clear:both;}

/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1;}

Använd inte denna metod. Den ser så ful ut i HTML koden.

Kod:

<div id="wrapper">

        <div class="floatLeft">Jag flyter till vänster</div>

        <div class="floatRight">Jag flyter till höger</div>



        <div style="clear:both;"></div>

</div>

editman

2011-12-06 22:26

tack för tipsen! det ser bra ut nu i Chrome/FF på Mac...dock inte i IE...någon som har en aning om vad det kan vara som gör att högerkolumnen förskjuts nedåt i IE? :(

Zyry	2011-12-07 07:20

kollade runt på sidan och såg detta :
http://imageshack.us/photo/my-images/535/ftttt.png/

editman

2011-12-09 13:15

någon som skulle vilja fixa det som återstår i CSS, att få sidan att se bra ut även i IE 7,8,9 ? Vad skulle det isåfall kosta? skicka gärna privat PM med prisförslag isåfall, skulle behöva få klart det i helgen...

Ekke	2011-12-16 19:47

Bara jag som finner det smått ironiskt att "designinstitutet.se" ber om hjälp med design? :)
Hoppas det löser sig för dig och att du får den hjälp du behöver.

daniel.s

2011-12-16 22:45

Citat:

Ursprungligen postat av Ekke (Inlägg 20427677)

Bara jag som finner det smått ironiskt att "designinstitutet.se" ber om hjälp med design? :)
Hoppas det löser sig för dig och att du får den hjälp du behöver.

Detta problemet har inte mycket att göra med design.

Ont: Som andra sagt är det nog en clearfix som behövs.

editman

2011-12-19 19:38

tack för alla tips! problemet löste sig med clearfix! ;)

Nilsson

2011-12-20 09:54

Citat:

Ursprungligen postat av MKÖ (Inlägg 20426314)

Kan inte css. prövat att googla?

Haha! Gud så korkat inlägg. Hur tänker man när man svarar på en fråga på det viset...

Om jag skall bidraga med allmän css och ie kunskap så har ie inte alls samma syn på margin och padding. Oftast när man inte får objekt att linjera i top i ie men i de andra browsers så är det för att ie anser att objektet är för brett. Är man inte så noga kan man ha smalare objekt annars är det till att ha en egen style för ie.

tartareandesire

2011-12-20 10:06

Citat:

Ursprungligen postat av Nilsson (Inlägg 20427974)

Alla har samma syn på margin och padding rent generellt men däremot inte i kombination med fast höjd eller bredd på element. Kör man t.ex. Firebug i FF så upptäcker man ofta layout-problem snabbt och enkelt.

Alla tider är GMT +2. Klockan är nu 16:12.