webForumDet fria alternativet

CSS och lagerplacering..

28 svar · 1 386 visningar · startad av Kalle M

Kalle MMedlem sedan mars 20041 936 inlägg
#1

Håller på provar att justera placeringar med CSS och lager.
Har skapat en slags class på sidan för att placera det hela. Använder Dreamweaver.

Skapat en ny stil och talat om placering mm.
Ritar upp ett lager och sedan definierat stilen på lagret.

Följande kod:

<style type="text/css">
<!--
.minStil {
	position: absolute;
	height: 175px;
	width: 250px;
	top: 400px;
	right: 200px;
}
-->
</style>

När jag ritat upp lagret så raderar jag dess placeringar och mått för att definiera classen.

Längre ner i koden lägger den in följande kod:

<div id="Layer1" style="position:absolute; z-index:1" class="minStil"></div>

Är jag rätt ute eller är jag ute och cyklar? :-)

Ska sådant hellre ligga i en extern css-mall?

jarvkloMedlem sedan juli 20013 378 inlägg
#2

Hmm...
"ska" är ett hårt ord och i princip finns det bara åsikter i frågan och inget absolut "facit", men jag hade nog funderat på att knyta hela klabbet till #Layer1 istället och låtit bli att blanda både "id, class och style" i just det här fallet.

Att blanda (X)HTML-kod och stilar på det där sättet gör ofta sidor större, men den största nackdelen som jag ser det är nog framförallt att koden blir svårare att förstå sig på i efterhand när du vill ändra och då i värsta fall måste leta på flera ställen i koden för att t.ex. flytta ditt "lager"

Kalle MMedlem sedan mars 20041 936 inlägg
#3

Ok! Om du ska knyta det till Layer1. Skapar du ett ID då?

Skulle vara kanon om du visade hur du lägger upp det.

Tack för förhand!

tantenMedlem sedan nov. 20051 596 inlägg
#4
<div id="Layer1"></div>

och
i Css

#Layer1 {
	position: absolute;
	height: 175px;
	width: 250px;
	top: 400px;
	right: 200px;
        z-index: 1;
}{

Men detta med Layer1 osv är sådant som DW namnger sina divar med. Det är ovanligt att man pratar om Lager. Lättare om man döper diven till något som kännetecknar divven. t.ex #annons.
Du frågade om absolute förut.
Minska fönstret och se vad som händer... :)
Lägger den sig över något annat?

Kalle MMedlem sedan mars 20041 936 inlägg
#5

Ok.

Hur gör jag i Dreamweaver?

Ska jag välja ny CSS och välja Class och namnge själv eller ska jag välja nån tag? Har du gjort det i DW får du gärna förklara.

Fick till den förrut men då hamnade ju allt på sidan.

När jag ritar upp ett lager i DW så skriver den:

<div id="Layer1" style="position:absolute; left:224px; top:144px; width:191px; height:154px; z-index:1"></div>
Kalle MMedlem sedan mars 20041 936 inlägg
#6

Om jag fattat rätt så ska id vara namnet på classen!? :-)
Bytte ut punkten i CSS till ett staket-tecken och det funkade :-)

Är det rätt?

Kalle MMedlem sedan mars 20041 936 inlägg
#7

Kod i Html av lagret.

<div id="Layer1" style="position:absolute; z-index:1"></div>

CSS:

#layer1 {
	position: absolute;
	height: 300px;
	width: 900px;
	top: 90px;
	right: 20px;
}
jarvkloMedlem sedan juli 20013 378 inlägg
#8

Yep - i princip...
... men id-namnen är skiftlägesberoende så du måste skriva #Layer1 och vara noga med att alla stora och små bokstäver hamnar rätt ;)

tantenMedlem sedan nov. 20051 596 inlägg
#9

Lite förklaring
# = id
. = class

Jag kan inte DreamWeaver, men måste du rita lager där? Går det inte bara att skriva
<div id="Layer1"> ?

Kalle MMedlem sedan mars 20041 936 inlägg
#10

Ok! kanon!

Vad är för skillnad på class och stil?

jarvkloMedlem sedan juli 20013 378 inlägg
#11

En stil är en "inställning" (t.ex. "position: absolute;" eller "font-size: 1.2em;") och skrivs i CSS.

Stilar kan du ange antingen i <style> eller i separata CSS-dokument (vilket brukar rekommenderas eftersom det oftast är enkelt att återanvända stilar mellan sidor på det viset), men också i attributet style="..." för individuella element på en sida om du känner att du måste lägga in stilarna direkt i (X)HTML-koden ;) .

En "class" i CSS är ett namn du hittar på för en mängd stilar - t.ex.

.mittnamn {
	position: absolute;
	height: 300px;
	width: 900px;
	top: 90px;
	right: 20px;
}

En klass ("class") kan du återanvända på flera ställen i ett och samma dokument genom att lägga till class="mittnamn" på lämliga (X)HTML-element

Du kan också klumpa ihop stilar i ett "id" i CSS med ett namn du kan välja själv såhär

#ettannatnamn {
	position: absolute;
	height: 300px;
	width: 900px;
	top: 90px;
	right: 20px;
}

Ett "id" kan du bara använda en gång (dvs bara på ett enda ställe) i ett och samma (X)HTML-dokument och det gör du genom att använda id="ettannatnamn" på ett, säger ett, (X)HTML-element.
Begränsningen för "id" gäller inte mellan dokument (dvs a.html och b.html kan bägge innehålla en <div id="ettannatnamn">) och du har ju redan sett att man kan blanda style, class och id i element om man vill eller behöver

Kalle MMedlem sedan mars 20041 936 inlägg
#12

Ok.

Just när det handlar om placering och position som jag gjort exempelvis..är det det som kallas CSS2?

jarvkloMedlem sedan juli 20013 378 inlägg
#13

På sätt och vis.
"CSS Positioning" är en del av CSS2.x - http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Kalle MMedlem sedan mars 20041 936 inlägg
#14

Angående CSS och placering med lager.

Om man vill göra samma variant på en tabell exempelvis..om den ska ha exakt samma position,bredd,höjd osv. Lägger man då in ID för #tabellen?

tantenMedlem sedan nov. 20051 596 inlägg
#15

Ska du bara ha en tabell så kan du använda
table{ width: ...; osv.}
tr{..}
td{..}

Har du läst på nu om positionering...?
Ditt exempel tidigare som är 900px bred, kommer fungera väldigt konstigt så fort man inte använder hela skärmens bredd. Har du testat det?

Kalle MMedlem sedan mars 20041 936 inlägg
#16

Tanten:

Har inte kollat. Tänker du på att den bör vara runt 770 i bredd istället?
Eller att den ska vara relativ?

tantenMedlem sedan nov. 20051 596 inlägg
#17

positionering
Jag la upp en fil för att du ska kunna se och testa... Dra ihop sidan och se vad som händer. När försvinner text och när kommer det en scroll i nederkant?
Din är den gråa och så la jag till den som är orange.

Kalle MMedlem sedan mars 20041 936 inlägg
#18

Ok, den absoluta försvinner helt när fönstret förminskas :-)
Kanon.
Bör alltså ha den relativa!?

tantenMedlem sedan nov. 20051 596 inlägg
#19

Det bestämmer du helt själv. :)
Jag vet ju inte vad du ska ha på din sida. Ville bara varna lite för vad som kan hända... ;)

Kalle MMedlem sedan mars 20041 936 inlägg
#20

Jag är väldigt tacksam för tips så jag börjar rätt nästa gång :-)
Jag håller ej på med en sida just nu men bara testar lite och är nyfiken.

Vad jag förstått så ska det mesta vara i CSS och att det är ett område som är jättestort :-)

1. Ett problem jag hade när jag gjorde en webbplats var att jag fick avstånd på en röd <H3> och <P> stycketext nedan. Att ej få avståndet mellan rubriken och stycketexten. Hur jag fixar det i CSS?

2.Om man gör tabeller på sidorna som ska se likadana ut i position mm..använder man CSS för placering av tabeller eller ska man använda mallar?

3. Hur mkt ska man ha i CSS egentligen..Ska man sätta positioner på allt i en CSS? Även bilder? Vill få in rätta tänket där.

4. Väldigt svårt att säga ..men vad är mer bra kunna vad gäller CSS?:-)
Nåt som är väldigt vanligt som jag missat? Har ju lärt mig lite om CSS nu. Vad är nästa steg om man säger så?

5. Vad jag förstått så ska man skippa frames. Kan känna att det är över min förmåga eftersom man måste kunna massa serverscript. Det är väl då man ska blanda in SSI?:-) Är det Phpkod man lägger in?

6. Rätt tänk ifrån början med CSS är ju väldigt bra.

Vill tacka för alla tips

138 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)