Re: [WEB] Opdatering til layout! Og go dt Nytår!

["Michael Schmidt" <sslug@sslug>]

Mon, 01 Jan 2007 18:14:43 +0100, Jan Trøjgaard <sslug@sslug> skrev:

> > Jeg er dog ikke så glad for den relative positionering af headerens
> > baggrundsbillede, da det får det til at se indeklemt ud når man går ned  
> > i
> > sidebredde.
> Jeg er faktisk helt enig med dig. Men indtil videre er det jo et mokup,  
> så
> det er en af de ting jeg så skal arbejde mere med!
>
> > Samtidigt kan headerblokken ikke håndtere ombrydningen af teksten; den
> > forsvinder ud af bunden.
> Problemet kunne løses med em min-width, hvis det ikke var fordi at  
> IE'erne
> ikke kan håndtere dette element. Om IE7 kan ved jeg ikke endnu, men IE <  
> 7
> kan ikke klare min vidth. Jeg vil prøve at se om jeg kan hacke elementet,
> så layoutet tager sig ens ud i alle browsere og ombrydningen undgås.
Det problem løser et billede faktisk ret nemt.
> > Må jeg foreslå at lave logo og tekst sammen som samme eller et delt
> > billede og så størrelses skalere det efter visningen.
> Ja, det må selvfølgelig. Ingen sure miner over det ;-)
God ånd :)
Åben standard, åben kildekode, åbent sind.

> Ideen er at bruge så lidt billeder/kode som over hovedet muligt. Hvis der
> bruges et billed vil loadtiden øges betragteligt.
Baggrundsbillede er jo allerede et billed ;)
- og et 2 bit (måske 4 eller endda 16) PNG (tekstfarve og transperant)  
behøver ikke fylde ret mange bytes.

> Jeg bliver lige nød til at uddyber her.
> Vi ønsker jo at layoutet kan se ensartet ud i de forskellige browsere,  
> samt
> i forskellige skærmstørrelser.
> Det er ikke problemfrit, derfor er vi nød til at bruge relativ  
> positionering
> (hensyn til skærmstørrelser).
> Det medføre så at der bliver problemer med de forskellige browsere, da
> browsere ikke håndtere elementerne ens, eller nogen tilfælde slet ikke  
> kan
> håndtere nogle elementer.
> Her kommer css-hacks ind i billedet og det tager tid at lave dem.

Jeg bruger selv følgende til at lave visninger, der minder om headeren.
et foreslag kunne være noget al a:

i css'en:

img, object {
 border : none;
 margin : 0;
 padding : 0;
}
.fullwidth {
 display : block;
 position : absolute;
 top : 1%;
 left : 5%;
 width : 90%;
}

i xthml'en

<img id="header" class="fullwidth" src="image/png/logo_og_navn.png"  
alt="Skåne Sjælland Linux User Group" title="SSLUG"/>

Jeg aner ikke om det ser rigtigt ud i IE, men det gør det i de andre  
browsere jeg bruger daglligt; Opera og Firefox.

--
Med venlig hilsen
/Zmit/
RLU # 314205