Flytte på grafikk med css

[mysjkin]

Burde jo vært til å finne ut av, men...

 

Jeg driver og skriver om sidene til Drøbak montessoriskole til å bruke css. (Layouten er ikke min, så den er det ikke noe vits i å kommentere) Det meste er greit, med utgangspunkt i en css fra http://bluerobot.com/web/layouts/layout1.html, men jeg har et par problemer. På mange av sidene, fx http://drobakmontessori.no/skole/visjon.htm er det brukt en vertikal linje til å skille mellom menyen på venstre side og teksten. Til nå har jeg satt den inn med

 <img src= "gronn.jpg", class="vert">

og i css

img.vert{
width: 1px;
height: 500px;
float:left;
}

Resultatet blir da at den (som jeg jo ber om) legger sitt øvre venstre hjørne der hvor tekstboksen begynner og dytter teksten en px til høyre, så teksten og linjen kommer helt tett oppi hverandre. Enda værre, når linjen slutter 500px nedover, så hopper teksten ut 1px igjen... Finnes det noen mulighet, eller rettere sagt, hvordan kan jeg si at linjen skal begynne her, men en em til venstre? Slik at den kommer klar av teksten.

 

Litt tilsvarende, menyen på venstre side er i form av bilder . Den burde det være mulig å skrive om som en <ul>, men finnes det noen måte å få listemarkøren til å ligge under teksten slik som den grønne sirkelen ligger nå?

 

Takk for hjelp!

 

M.

 

PS, bare for å gjenta, jeg jobber rent teknisk med dette og har ikke noe med layouten å gjøre, så råd av typen, 'ja men du må da endre utseendet til....' er det ikke noe vits i å komme med...

 

Edit: bah, burde da kunne forskjell på høyre og venstre...

Endret 7. januar 2005 av mysjkin

[Steinmann]

hvorfor i grevens navn har du "," i img tag'n din? :o

og ikke glem at alt attributten skal sitte i img.

Hvorfor har du float: left?

skjønner egentlig ikke hva det første spørsmålet går ut på :S

så ikke noe direkte feil med side.

 

men angående spørsmål nr 2:

du si at li elementene skal være block(tror du må det)

også legge på et bakgrunndsbilde, som du da kan legge "left top"

da vil du få en sån grønn finkant på starten.

og jeg ville lat være å ha imagemap på våpenskjoldet og

helle latt hele greia være en link.

[mysjkin]

hvorfor i grevens navn har du "," i img tag'n din? :o

Fordi jeg ikke har det skrev inn tag'en i stedet for å kopiere.

 

Hvorfor har du float: left?

Mulig dumt spørsmål, men hvordan skal jeg ellers få linjen til å ligge ved siden av teksten?

 

Vel, nå har jeg fått lagt ut mitt utkast også, sammenlikn http://sickel.net/dms-css.html med http://drobakmontessori.no/skole/visjon.htm og se på den grønne gradienten ned til venstre for teksten. Hvordan kan jeg dytte den en em elns til venstre med css?

 

Skal se på tipset om li-elementene, takker.

 

M.

[Steinmann]

ahh, nå er jeg med...

skjønnte ikke hvilken linje det var snakk om, men nå ser jeg den.

hvorfor ikke legge den som bakgrunn på maindiv'n? også en liten padding.

synes foresten at den tynne streken du har på originalen er penere en den nye. veit ikke om det er meningen at den skal være tykkere,

men den har nå blitt det

[RulleRimfrost]

CSS

p {padding-left: 15px; ..............osv.....}

burde fikse teksten

 

 

HTML

<img src=xxxxxxx.gif style="position: absolute; top: 50px; left: 50px">

plasserer vel bildet uten å påvirke teksten

[mysjkin]

ursus og RulleRimFrost, tusen takk De hintene hjalp. Jeg gikk i den typiske fella når man skal rydde opp i noe, og klarte ikke å frigjøre meg nok fra det gamle. (Om enn jeg var rimelig rask til å røske innholdet ut av tabellen det var satt inn i for å formatere...)

 

M.