WN - Tabellfri design, oförståelig?

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

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

- - Tabellfri design, oförståelig? (https://www.wn.se/forum/showthread.php?t=22904)

crazzy

2007-08-16 01:14

Jag börjar bli galen på den här j**** tabellfria designen. Den ser snygg ut, funkar överallt men jag fattar inte ett dyft av koden.. Testade att ladda ner en gratistemplate och titta på koden för att se om jag kunde fatta LITE men nej.. sen tittade jag på hur den var uppbyggd grafiskt och byggde en kopia med tabeller.. Den funkade inte jättebra i IE6 men whatever jag förstod koden.. Så om nån vet nån bra sida där man kan lära sej att förstå och eventuellt skriva egna sådana här sidor skulle jag vara djupt tacksam..

Kristoffer G

2007-08-16 01:57

Jag antar att du menar <div> uppbyggda sidor??

crazzy

2007-08-16 11:08

japp... dem verkar helt konstiga??

Nemo	2007-08-16 11:27

Hej!

Titta på:
http://iwtjanster.idg.se/webbstudio/...kel.asp?id=258
(resten av deras css-skola kan också vara lämplig om du vill lära dig mer om att bygga sidor i lager)

Den här kan också vara bra:
http://www.alistapart.com/articles/practicalcss/

crazzy

2007-08-16 12:03

tackar B)
ska läsa igenom dem när jag kommer hem och se om jag fattar nånting.. :P

AlternativePhotography

2007-08-16 16:14

Den här är också bra och pedagogisk:
http://css.maxdesign.com.au/floatutorial/index.htm

crazzy

2007-08-16 16:58

okej..så här länge funkar det med att objekten kommer i rätt ordning och hyfsat rätt på sidan. finns det några css-egenskaper för att typ positionera objekt på sidan med exakta pixelmått procent och *??

jag har testat width: *; men det funkar inte alls..

stakes

2007-08-16 17:00

.dittObjekt

{
position: absolute;
top: 100px;
left: 100px;
}

som exempel.

<div class="dittObjekt">hej</div>

crazzy

2007-08-16 17:17

det verkar inte funka så bra?? jag satte top: 216; på ett objekt och då flög det upp och satte sej i övre vänstra hörnet.

crazzy

2007-08-16 17:22

nej nu verkar funka.. glömde trycka Ctrl+S innan jag uppdaterade sidan.. =(

crazzy

2007-08-16 17:35

hmm..kan man få det relativt till objektet till vänster istället för relativt till skärmkanten?

JohnKarlsson

2007-08-16 18:10

Citat:

Originally posted by crazzy@Aug 16 2007, 17:35
hmm..kan man få det relativt till objektet till vänster istället för relativt till skärmkanten?

oh, jag tror jag fattade allting nu. setat i månader och försökt förstå hur man bygger med divvar. Undrar också ifall man kan får det relativt till ett annat objekt :D

crazzy

2007-08-16 18:18

Citat:

Ursprungligen postat av JohnKarlsson

Citat:

Ursprungligen postat av crazzy

hmm..kan man få det relativt till objektet till vänster istället för relativt till skärmkanten?

oh, jag tror jag fattade allting nu. setat i månader och försökt förstå hur man bygger med divvar. Undrar också ifall man kan får det relativt till ett annat objekt

ja det skulle vara väldigt trevligt=)

HenSod

2007-08-16 18:41

Man sätter förälderelementet till position:relative.

crazzy

2007-08-16 19:20

Citat:

Originally posted by HenSod@Aug 16 2007, 18:41
Man sätter förälderelementet till position:relative.

så om föräldern e body skriver jag:
body
{
position:relative;
}

eller?? nu när jag tänker på det borde det inte vara mer logiskt att sätta det element jag positionerar som relative???

crazzy

2007-08-16 19:34

oki det funkade med det...nu undrar jag bara hur jag sätter nånting till * som jag brukar göra i frames och tabeller...

melin

2007-08-16 19:35

nej.. du sätter det på din div (eller annat element) som då blir relativt placerad mot det element den ligger i

crazzy

2007-08-16 19:41

Citat:

Originally posted by melin@Aug 16 2007, 19:35
nej.. du sätter det på din div (eller annat element) som då blir relativt placerad mot det element den ligger i

japp det e redan fixat men hur gör jag med *?? alltså jag vill ha ett element som ligger i vänsterkanten och ett i högerkanten och som sedan har en variabel bredd för att fylla ut så att sidan anpassar sej till olika upplösningar... det verkar inte funka med:

Citat:

#LeftPadding
{
margin: 0px 0px 0px auto;
}
#RightPadding
{
margin: 0px auto 0px 0px;
}

crazzy

2007-08-16 21:08

nån som vet?

elofsson

2007-08-16 23:33

Det är väl bara att skippa att ange width över huvud taget? Då använder div:en så mycket bredd det bara går.

allstars

2007-08-17 01:34

Citat:

Originally posted by crazzy@Aug 16 2007, 19:41

Citat:

#LeftPadding
{
margin: 0px 0px 0px auto;
}
#RightPadding
{
margin: 0px auto 0px 0px;
}

Hurdant utseende önskar du?
vilken bredd på hela sidan och vilka bredder på leftPadding, center och right?

Kod:

<style type="text/css">

#barn {position:relative; top:100px; left:150px;} /* alltså - relaterat till föräldern */

</style>

<div id="foralder">

 <div id="barn">

innehåll

 </div>

</div>

Aerpe

2007-08-17 11:20

http://arloo.blogspot.com/2005/11/cs...ps-tricks.html

Länk samling till CSS lösningar och exempel.

crazzy

2007-08-17 13:05

jag hade tänkt mej att ha överst en header med 720 i bredd centrerad och 150 hög..
under den en meny som e 66 hög och så bred det behövs och centrerad..
under den ska jag ha 5 divar på samma rad..
varav två 160 breda och en 360... variabel höjd...
leftpadding och rightpadding ska ligga utanför dessa och täcka upp överblivet utrymme..
och nederst en footer...

KarlRoos

2007-08-17 18:45

Det är inte svårt att fixa.
Vad sägs om att lära dig lite CSS och Divs och sedan skriva ihop det där.

Lycka till ;)

crazzy

2007-08-17 20:38

det enda jag har problem med är att få en div att fylla ut allt tillgängligt utrymme

edit:

det verkar nämligen inte funka med att sätta width till auto

crazzy

2007-08-17 21:05

http://www.crazzy.se/tmp/site.jpg
så här tänkte jag ha det..

#LeftMargin och #RightMargin ska ligga på var sin sida och ta upp massa utrymme som blir över... #LeftMargin tar för tillfället inte upp nån yta alls??

crazzy

2007-08-17 22:33

äh jag skiter i dom här förbannade divarna och håller mej till tabellerna som FUNKAR för det gör fanimej inte divarna.....

KarlRoos

2007-08-18 00:41

Du, det är nog bara du som inte förstår det :)

Mortekai

2007-08-18 00:59

Ta bort leftmargin och rightmargin och lägg en div runt calendar, maincontent och google som du centrerar och sen ger önskvärd bredd om dessa två områden ska vara tomma.

HMH	2007-08-23 12:00

En torrkodad förtydling av vad Mortekai sa... som även visar hur du centrerar (tricket är att både använda text-align:center och margin:auto).

html:

Kod:

<div id="Header"></div>

<div id="MainMenu"></div>

<div id="ContentArea">

  <div id="Calendar"></div>

  <div id="MainContent"></div>

  <div id="Google"></div>

</div>

<div id="Footer"></div>

css:

Kod:

body {

  text-align: center;

}

body div {

  text-align: left;

  margin: 0;

}

#ContentArea {

  width: 680px;

  margin: 0 auto;

}

#MainContent {

  width: 360px;

  float: left;

}

#Calendar,

#Google {

  width: 160px;

  float: left;

}

#Footer {

  clear: both;

}

crazzy

2007-08-24 21:23

okej, tror jag fixar det nu.. tack för all hjälp och ja jag ska lära mej css....
ska bara kämpa klart med c++ först.. och kanske ta och försöka lära mej php??=)

Alla tider är GMT +2. Klockan är nu 14:52.