id v css

Juri1990

Snažím sa robiť veľmi jednoduchú stránku no mám problém s farbami a pozíciami. Konkrétne nechce mi dať správnu farbu odkazov a hlavý text(úvod) mi síce robí akože na stred, ale celý ten blok stále hádže doprava.

Kód: Vybrať všetko

BODY {background-color: Black;}

#lista{
	position: absolute; width: 250px; top: 250px; left: 0px;
	background-color: Black;
	color: #0156E4;
	font-family: Calibri, Cambria;
	font-size: 25px;
}
#lista A:LINK, A:VISITED, A:active{
	color: #1C2DFF;
	text-decoration: none;
}
#lista A:HOVER{
	background-color: Black;
	color: #1AAEFF;
	text-decoration: none;
}


#uvod {
	position: absolute; top: 250px; left: 250px;
	background-color: Black;
	color: #1573ff;
	font-family: "Comic Sans MS";
	font-size: 30px;
	font-style: italic;
	text-align: center;
}

#historia{
	position: absolute; top: 250px; left: 250px;
	background-color: Black;
	color: #9601E7;
	font-family: "Comic Sans MS";
	font-size: 20px;
	font-style: italic;
	text-align: center;
}

#historia A:LINK, A:VISITED, A:active{
	color: #01ACB8;
	text-decoration: none;
}

#historia A:HOVER {
	background-color: Black;
	color: #4BF3FE;
	text-decoration: none;
}

#historia H1 {
	color: #0089F4;
	font-family: "Lucida Calligraphy";
	font-size: 225%;
	margin-bottom: 20px;
	text-align: center;
	margin-top: 20px;
}

eMPiko

Nevyrozumel som z toho o co ti ide. Hod nejaky screen alebo take nieco.

Ale len tak odhadom, v tom #uvode nemas urceny atribut width, skus ho tam pridat, ci to nepomoze.

Juri1990

Veľmi nepomohlo, ale rozmýšľam, že tie pozície spravím skôr cez tabuľku. Väčší problém mám s tým, že do lišty mi dáva nastavenie linku pre históriu aj napriek tomu, že som to normálne oddelil cez <spam id="">

BX · Príspevok od používateľa BX » 29 okt 2009, 11:41

no ak to oddelujes naozaj cez <spam id=""> tak to skus oddelit pomocou <span id="">

Juri1990

Soryy som to sem zle napísal...no už som to skoro všetko poriešil, len ešte neviem ako nastaviť niečo ako okraje, aby mi text neliezol až do rámu okna.

awtt · Príspevok od používateľa **awtt** » 29 okt 2009, 12:30

padding

Juri1990

To mi nejak nepomohlo, už som to spravil pomocou /position: relative; top: 50px; width: 90%;/ ale nefunguje mi to vo firefoxe ani v opere, ba v IE

PayteR

daj sem aj html kod a cely ... lebo nechapem prečo vlastne chceš všetko riešiť absolutnou poziciou. najlepšie je robiť štýlom

Kód: Vybrať všetko

<div style="margin:0 auto;width=1000px;">  - toto vycentruje div do stredu
<ostatne tagy></ostatne tagy>
<ostatne tagy></ostatne tagy>
...
<ostatne tagy></ostatne tagy>
</div>

potom keď chceš niečo absolutnou poziciou riešiť môžeš to nastaviť tak že sa to bude viazať na nejaký element

Kód: Vybrať všetko

<div style="position:relative"> 
<div style="position:absolute;left:20px;top:50px;"></div> a tento div bude 20 a 50  pixelov od laveho horneho rohu nadradeneho elementu nie celej strany
</div>

a v tom CSS si obrav nazvy tagov, "A" je nespravne "a" je spravne, "BODY" nespravne "body" spravne atd

Juri1990

Jediné čo mi momentálne nefunguje je tá relatívna šírka.

Kód: Vybrať všetko

BODY {
background-color: Black;
text-align: center;
margin:0 auto 0 auto;
}


#lista{
	position: absolute; width: 200px; top: 250px; left: 0px;
	background-color: Black;
	color: #0156E4;
	font-family: Calibri, Cambria;
	font-size: 25px;
	text-align: left;
	z-index: 1;
}
#lista A:LINK, #lista A:VISITED, #lista A:active{
	color: #1C2DFF;
	text-decoration: none;
}
#lista A:HOVER{
	background-color: Black;
	color: #1AAEFF;
	text-decoration: none;
}


#uvod {
  position: relative; top: 50px; width: 90%;
  margin:0 auto 0 auto;
  background-color: Black;
	color: #1573ff;
	font-family: "Comic Sans MS";
	font-size: 30px;
	font-style: italic;
	text-align: center;	
}

#historia{
	position: relative; top: 50px; width: 90%;
  background-color: Black;
	color: #9601E7;
	font-family: "Comic Sans MS";
	font-size: 20px;
	font-style: italic;
	text-align: center;
	margin:0 auto 0 auto;
}

#historia A:LINK, #historia A:VISITED, #historia A:active{
	color: #01ACB8;
	text-decoration: none;
}

#historia A:HOVER {
	background-color: Black;
	color: #4BF3FE;
	text-decoration: none;
}

#historia H1 {
	color: #0089F4;
	font-family: "Lucida Calligraphy";
	font-size: 225%;
	margin-bottom: 20px;
	text-align: center;
	margin-top: 20px;
	margin:0 auto;
}

#vzhlad {
  position: relative; top: 50px; width: 90%;
	background-color: Black;
	color: #00cad5;
	font-family: "Comic Sans MS";
	font-size: 20px;
	font-style: italic;
	text-align: center;
	margin:0 auto 0 auto;
}

#povaha {
	position: relative; top: 50px; width: 90%;
	background-color: Black;
	color: #00cab0;
	font-family: "Comic Sans MS";
	font-size: 20px;
	font-style: italic;
	text-align: center;
	margin:0 auto 0 auto;
}

PayteR

som písal HTML kod nakopiruj... vieš aspon aky je rozdiel medzi HTML a CSS ? alebo daj radšej link na ten web, to bude najrozumnejšie ...

btw ak chceš dať na stred div s absolutnou poziciou potrebuješ niečo takéto

Kód: Vybrať všetko

position:absolute;
left:50%;
width:400px;
margin-left:-200px;  //margin musí byť záporny a polovica width, lahka matika