Notifikationer

Markér alle som læst Log ud

tdh1309 Juniormester

17. marts 2006 - 21:12 Der er 26 kommentarer og
1 løsning

Layout - template med CSS

Hej

Jeg har i mange år baseret mine sider på html med en høj grad af anvendelse af tables. Har perifært anvendt css men ikke i særlig høj grad.

Kan man med CSS:
- positionere sin side på samme måde som med tables?

Men for at gøre en kort historie lang :-)
Kan jeg bede om et ilustrativt eksempel på implementering af et design (med billeder, kollonener, og andet nyttigt) baseret på css. Det skal bemærkes at der bagved vil blive implementeret noget ASP

Jeg kan ikke helt vurdere omfanget af spørgsmålet, men hvis det er for ukonkret - spørg til, hvis det er for omfattende - brok dig ...

MVH

Thomas

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 21:36 #1

Hmm - måske det skulle specificeres en anelse:
Blank - toplogo - blank
- menu -
- spalte1(med bil.)- spalte 2

I første omgang skal billedet (bil.) placeres øverst til venstre i spalte 1, og fylde halvdelen af spaltebredden. Teksten skal så omkranse billedet!!!

/Thomas

Synes godt om

mclemens Nybegynder

17. marts 2006 - 22:05 #2

Forstår sikkert ikke helt skitsen ovenover :/
Mener du noget i den stil her eller har du en
bedre skitse evt. link til .jpg med streger?
(slet selv background-color's de er sat af
hensyn til overskuelighed af div'sene)

<html><head>
<style type="text/css">

body{text-align:center;margin:0px;padding:0px;}

.alignc{text-align:left;width:770px;margin:0px auto;background-color:red;}

.logotl{float:left;width:400px;background-color:green;}
.logotr{float:right;width:370px;background-color:blue;}

.menu{float:left;width:150px;background-color:yellow;}
.content{float:right;width:610px;background-color:aqua;}

.imgspl{float:left;width:380px;background-color:gray;}
.imgspr{float:right;width:380px;background-color:purple;}

.leftit{float:left;width:50%;}

</style>
</head><body>

<div class="alignc">
<div class="logotl"><img src="billedet.jpg" /></div>
<div class="logotr">BLANK</div>

</div><br /><div class="alignc">

<div class="menu">MENUEN</div>
<div class="content">INDHOLDET</div>

</div><br /><div class="alignc">

<div class="imgspl">
<img src="etanderbillede.jpg" class="leftit" />EN<br />MASSE<br />TEKST<br />ELLER<br />RETTERE<br />...<br />EN<br />HEL<br />DEL<br />TEKST.
</div>
<div class="imgspr">SPALTE NR. 2</div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

17. marts 2006 - 22:16 #3

Ups, rettelse
( fejl i Firefox... det kan vi jo ikke have :/ )

<html><head>
<style type="text/css">

body{text-align:center;margin:0px;padding:0px;}

.alignc{text-align:left;width:770px;margin:0px auto;}
.innercont{float:left;width:100%;background-color:red;}

.logotl{float:left;width:400px;background-color:green;}
.logotr{float:right;width:360px;background-color:blue;}

.menu{float:left;width:150px;background-color:yellow;}
.content{float:right;width:610px;background-color:aqua;}

.imgspl{float:left;width:380px;background-color:gray;}
.imgspr{float:right;width:380px;background-color:purple;}

.leftit{float:left;width:50%;}

</style>
</head><body><div class="alignc">

<div class="innercont">
<div class="logotl"><img src="billedet.jpg" /></div>
<div class="logotr">BLANK</div>
</div>

<div class="innercont">
<div class="menu">MENUEN</div>
<div class="content">INDHOLDET</div>
</div>

<div class="innercont">
<div class="imgspl">
<img src="etanderbillede.jpg" class="leftit" />EN<br />MASSE<br />TEKST<br />ELLER<br />RETTERE<br />...<br />EN<br />HEL<br />DEL<br />TEKST.
</div>
<div class="imgspr">SPALTE NR. 2</div>
</div>

</div></body></html>

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 22:17 #4

Hmmm - meget tæt på....
Jeg ville lige teste teksten rundt om billedet, og der er et lille problem!

Håber du kan se det med koden nedenfor (det grafiske indtryk er ikke skide godt) - Er det bare vilkårerne, eller kan det forbedres?

<html><head>
<style type="text/css">

body{text-align:center;margin:0px;padding:0px;}

.alignc{text-align:left;width:770px;margin:0px auto;background-color:red;}

.logotl{float:left;width:400px;background-color:green;}
.logotr{float:right;width:370px;background-color:blue;}

.menu{float:left;width:150px;background-color:yellow;}
.content{float:right;width:610px;background-color:aqua;}

.imgspl{float:left;width:380px;background-color:gray;}
.imgspr{float:right;width:380px;background-color:purple;}

.leftit{float:left;width:50%;}

</style>
</head><body>

<div class="alignc">
<div class="logotl"><img src="billedet.jpg" /></div>
<div class="logotr">BLANK</div>

</div><br /><div class="alignc">

<div class="menu">MENUEN</div>
<div class="content">INDHOLDET</div>

</div><br /><div class="alignc">

<div class="imgspl">
<img src="etanderbillede.jpg" class="leftit" />EN<br />MASSE<br />TEKST<br />ELLER<br />RETTERE<br />...<br />EN<br />HEL<br />DEL<br />TEKST.
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkasdælfkjasdælfjælasdfjælasdf
</div>
<div class="imgspr">SPALTE NR. 2</div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

17. marts 2006 - 22:38 #5

Hvad er fejlen præcis?
- har lige puttet den ind i mit svar nr. 2 (bedre udgave) hvor der ikke er problemer i firefox samt lavet lidt mellemrum i teksten...

<html><head>
<style type="text/css">

body{text-align:center;margin:0px;padding:0px;}

.alignc{text-align:left;width:770px;margin:0px auto;}
.innercont{float:left;width:100%;background-color:red;}

.logotl{float:left;width:400px;background-color:green;}
.logotr{float:right;width:360px;background-color:blue;}

.menu{float:left;width:150px;background-color:yellow;}
.content{float:right;width:610px;background-color:aqua;}

.imgspl{float:left;width:380px;background-color:gray;}
.imgspr{float:right;width:380px;background-color:purple;}

.leftit{float:left;width:50%;}

</style>
</head><body><div class="alignc">

<div class="innercont">
<div class="logotl"><img src="billedet.jpg" /></div>
<div class="logotr">BLANK</div>
</div>

<div class="innercont">
<div class="menu">MENUEN</div>
<div class="content">INDHOLDET</div>
</div>

<div class="innercont">
<div class="imgspl">
<img src="etanderbillede.jpg" class="leftit" />EN MASSE TEKST ELLER RETTERE ... EN HEL DEL TEKST.
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf</div>
<div class="imgspr">SPALTE NR. 2</div>
</div>

</div></body></html>

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 22:44 #6

Det var vist det - du har glemt at komme med et svar!
MANGE TAK FOR DEN HURTIGE HJÆLP :-)

Hvis du en dag mangler lidt asp - sig til!

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 22:45 #7

P.S. jeg var vist lidt for hurtigt.. man kan ikke få css. til automatisk at opdele i spalter? Det er ikke et problem, som jeg ikke kan løse, men hvis man kunne :-)

Synes godt om

mclemens Nybegynder

17. marts 2006 - 22:45 #8

svar ;)
... bruger selv php ;)

Synes godt om

mclemens Nybegynder

17. marts 2006 - 22:56 #9

At få den til at opdele spalterne baseret på indholdet i spalten som med:

<table width="100"><tr><td>Denne td er den største</td><td>Td mindst</td></tr></table>

Da div altid har width på 100% med mindre andet defineres så vil denne ikke virke...:

<div> <div>Denne div fylder hele siden</div> <div>Ditto desværre</div> </div>

- Så nej, desværre, der skal tables til ... så vidt jeg ved ... (man kan sikkert også lave noget javascript på det så det klares på den måde :/ )

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 22:57 #10

Jo, eller når man nu kører php/ asp kan man jo relativt nemt dele teksten i to !!!
Man det havde jo været perfekt hvis css. kunne klare det :-)
Sidder lige og prøver at lure din syntaks af !!! Det bliver sjovt :-(

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:01 #11

Hmmm - det slog mig lige (hvis du stadig har tid og lyst)
På www.EnOmmer.dk - kan du faktisk se lige præcist hvad jeg efterspørger....
Hvis du stadig er hooked - så ville at design ale dette være guld vær (fuck farver o.l - din temp. er fin) men selve ramme opdelingen ville virkelig være perfekt...
PS. du skal se på forsiden

/Thomas

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:02 #12

P.S. menuen er implementeret via javascript (hvis det betyder noget)

Synes godt om

mclemens Nybegynder

17. marts 2006 - 23:10 #13

Jo, eller når man nu kører php/ asp kan man jo relativt nemt dele teksten i to !!!
Man det havde jo været perfekt hvis css. kunne klare det :-)

- Ja jeg bryder mig egentlig heller ikke om javascript, selvom det virker lidt fedt til tider, men hvis javascript er deaktiveret hos personen, der besøger siden kan det "nogle gange" ødelægge hele sidens design...
- Prøv at gå ind på siden du nævner uden javascript :P

... Kigger på opbygningen - menuen kan vist godt tages - den er gratis hvis du beholder tags som står i den...

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:13 #14

Uden at være sikker - tror jeg faktisk at du lige har lært mig at gå i css...
Brug ikke mere tid medmindre jeg spørger igen!!!!

Synes godt om

mclemens Nybegynder

17. marts 2006 - 23:17 #15

Følgende filer skal bruges:

www.enommer.dk/js/menu.js <- Scriptet er gratis det står i denne fil ;)
www.enommer.dk/js/menu_items.js
www.enommer.dk/js/menu_tpl.js
www.enommer.dk/css/menu.css

Synes godt om

mclemens Nybegynder

17. marts 2006 - 23:17 #16

ok...

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:24 #17

Og så er jeg der igen :-(
Hvis du ser på http://www.damkierhansen.dk/chtk/test2.htm
Den øverste linie flugter ikke med det resterende, kan man ikke gøre det således at det restende automatisk følger bredden på dette billede? (bredden må meget gerne have lov til at være en ukendt variabel)

Synes godt om

mclemens Nybegynder

17. marts 2006 - 23:29 #18

Kigger på det...

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:32 #19

hmmm - har pillet lidt ved ccs - det var vist ikke en succes...

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:34 #20

Nu skulle den være god igen!

Synes godt om

mclemens Nybegynder

17. marts 2006 - 23:41 #21

Den øverste linie flugter ikke med det resterende, kan man ikke gøre det således at det restende automatisk følger bredden på dette billede?
- Ikke som ukendt variabel - størrelsen skal kendes og størrelserne nedenunder kan herefter være x antal % ... hvis vi nu siger at dit billede fylder 100% kan vi f.eks sige at menuen skal fylde 100% og venstre spalte skal fylde 50% og højre spalte 50% ... noget i den stil?

Synes godt om

tdh1309 Juniormester

17. marts 2006 - 23:46 #22

hmmm - det vil jeg da lige eksperimentere med....
P.S. få dig en kæreste/ kone og gå i seng, du har knoklet rigeligt i aften :-)
Super mange tak for hjælpen...

Synes godt om

mclemens Nybegynder

17. marts 2006 - 23:58 #23

Noget ala det her:
(spørg mig ikke om hvorfor de ikke begge kan have width på 50% ??? )

css

body{margin:0px;padding:0px;}

div.fullw{width:100%;background-color:#00FFFF;}

div.halfwl{float:left;width:49%;background-color:#FFFFFF;}
div.halfwr{float:left;width:51%;background-color:#0000FF;}

img.leftit{float:left;width:50%;}

html

<html><head>
<link rel="stylesheet" href="stdpg_style.css" type="text/css">

</head><body><div class="fullw">

<div class="fullw"><img src="cHoejeTaaLogo.png"></div>

<div class="fullw">MENUENsaædljf</div>

<div class="fullw">
<div class="halfwl">
<img src="1234_files/yin_yang_vifte_mini.jpg" class="leftit">EN MASSE TEKST ELLER RETTERE ... EN HEL DEL TEKST.
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf</div>
<div class="halfwr">SPALTE NR. 2</div>

</div></body></html>

P.S. få dig en kæreste/ kone og gå i seng, du har knoklet rigeligt i aften :-)
> hehe tjek evt. dem her ;)
(det er ikke hver gang jeg går grassat :D )
http://www.eksperten.dk/spm/692510
http://www.eksperten.dk/spm/688364
http://www.eksperten.dk/spm/692890

Synes godt om

mclemens Nybegynder

18. marts 2006 - 00:06 #24

Hov, der mangler en </div> i </div></body></html>...

Synes godt om

mclemens Nybegynder

18. marts 2006 - 00:19 #25

Nåh, jeg sidder jo og leger videre alligevel :/
... stopper med at lege nu (p.s. tak for karma ;) )

.html
<html><head>
<link rel="stylesheet" href="1234_files/stdpg_style.css" type="text/css">

</head><body>

<div class="fullw"><img src="1234_files/cHoejeTaaLogo.png" class="logoet"></div>

<div class="fullw">MENUENsaædljf</div>

<div class="fullw">
<div class="halfwl">
<img src="1234_files/yin_yang_vifte_mini.jpg" class="leftit">EN MASSE TEKST ELLER RETTERE ... EN HEL DEL TEKST.
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf
sdjfælasjdfæaksjfælkas dælfkjasdælfjælasdfjælasdf</div><div class="halfwr">SPALTE NR. 2aaaaaaaaaaaaaaaaaaaaaaaa</div>

</div>

</body></html>

.css
body{margin:0px;padding:0px;}
img.logoet{width:100%;}

div.fullw{width:100%;background-color:#00FF00;}

div.halfwl{position:absolute;width:50%;background-color:#FFFFFF;}
div.halfwr{position:absolute;left:50%;width:50%;background-color:#0000FF;}

img.leftit{float:left;width:50%;}

Synes godt om

mclemens Nybegynder

18. marts 2006 - 00:46 #26

Her er lidt om .css bl.a.
http://www.w3schools.com/

Synes godt om

mclemens Nybegynder

18. marts 2006 - 02:05 #27

Prøv at skifte
div.halfwl{position:absolute;width:50%;background-color:#FFFFFF;}
div.halfwr{position:absolute;left:50%;width:50%;background-color:#0000FF;}

Til
div.halfwl{position:absolute;width:50%;text-align:justify;background-color:#FFFFFF;}
div.halfwr{position:absolute;left:50%;width:50%;text-align:justify;background-color:#0000FF;}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS

31/07

Test: Nu får du high-end-egenskaber i en prisoverkommelig robotstøvsuger

31/07

Lækket memo peger på Iran: Hackerne ville sænke vandtrykket og forurene drikkevandet i USA

31/07

Dette tal har afgjort tech-giganternes skæbne på børsen - har investeret 6.500.000.000.000 kroner

31/07

Salget brager frem hos AWS: Hurtigste vækst de seneste fem år

31/07

Den dramatiske historie om det undersøiske telegrafkabel, der forbandt verden

31/07

Macbook Neo og iPhones sælger som varmt brød - men alligevel bliver Apple straffet af investorerne

31/07

Nørgaard: Når storrummene er tomme og halvlederne er på ferie, så begynder folk forsigtigt og tøvende at opføre sig normalt

31/07

Henrik Zangenberg har skiftet fra amerikansk til kinesisk AI: Kinesiske AI-modeller giver mig kontrollen tilbage

31/07

DTU-professor advarer om store konsekvenser: "Hvad betyder AI-gigafabrikker for vores elnet, vand og natur?"

30/07

EU stiller kæmpe milliardpulje til rådighed: Klar til investere i syv nye AI-gigafabrikker

30/07

Palantir-ansatte fik adgang til følsomme sundhedsdata: Myndighed erkender fejl og beklager

Vis flere artikler

IT-JOB

KMD A/S

Support Consultant for KMD Nexus

Forsvarsministeriets Materiel- og Indkøbsstyrelse

IT-sikkerhedsspecialist med fokus på Governance, risiko, compliance og akkreditering

PensionDanmark

IT-udvikler til PensionDanmark

Økonomistyrelsen

Udviklere til statens nye AI-platform

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Generalist med mod på at formere processer og arbejdsgange for Materielstabens nye enhed for operativ IT og kommunikationsløsninger

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 16:21	Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I går 09:38	Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41	To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34	Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58	Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows

White papers

De spørgsmål 200+ danske virksomheder stiller om print – samlet i én guide
Konica Minolta
Undgå at printeren bliver svageste led i sikkerheden
Konica Minolta
Samarbejde mellem AI og mennesker styrker sikkerheden
Konica Minolta

Flere white papers »