Jump to content

HTML: Centreshana HTML & CSS


assaulter
 Share

Recommended Posts

Kaa lai nocentree elementu ".pamats"?

kods seko.

 

===============================

--- CSS -- (base.css)--------------------------------

===============================

 

.pamats {

border: 1px solid black;

margin-top: 20px;

margin-bottom: 20px;

padding: 15px 15px 15px 15px;

background-color: #FFFFCC;

width: 600px;

}

 

===============================

 

===============================

--- HTML -- (lapa.htm) ------------------------------

===============================

 

<html xmlns="http://www.w3.org/TR/REC-html40">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1257"/>

<meta http-equiv="Content-Language" content="lv"/>

<meta name="keywords" content="reklāma"/>

<title>.: Nosaukums:.</title>

<link href="base.css" rel="stylesheet" type="text/css">

</head>

<body>

<div span class="pamats">

teksts, kas buus necetreets centreetaa elementaa!

</div>

</body>

</html>

 

===============================

Link to comment
Share on other sites

Guest Udzzis

CSS:

margin-left:auto;

margin-right:auto;

Un noteikti neaizmirsti DOCTYPE, savādāk tas var nestrādāt piemēram uz IE. Pēc koda var noprast ka tas būs HTML 4.01, tātad DOCTYPE būs no šiem:

Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

kā arī nevis "width 90%;" bet "width: 90%;".

Link to comment
Share on other sites

assaulter

Biju nedaudz kļūdījies aprakstot kodu:

bloka ".pamats" 90% platuma vietā uzskatāmāk lietot, fiksetu platumu

piemēram 600px, tad, ja izškirtspēja bus lielaka par 800x600 bloks atradisies no kreisās

malas ar atkāpi (kā redzams "pirmajā" kodā).

 

Paldies par labojumiem Udzzi

:wink:

 

Lietojot:

margin-left: auto;

margin-right: auto;

un

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

bloks tiek centrēts horizontāli.

 

-----

 

Tagad uzradās jauns jautājums:

kā lai panāk bloka ".pamats" ne tikai horizontālu, bet arī

vertikālu centrešanu izmantojot CSS?

 

uzstādījumi

margin-top: auto; un

margin-top: 0px;

ir ekvivalenti!

 

tad nu jaunais kods:

CSS (base.css)

.pamats {

  border: 1px solid black;

  margin-top: 20px;

  margin-bottom: 20px;

  margin-left: auto;

  margin-right: auto;

  padding: 15px 15px 15px 15px;

  background-color: #FFFFCC;

  width: 600px;

  }

HTML (lapa.htm)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/TR/REC-html40">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=windows-1257"/>

 <meta http-equiv="Content-Language" content="lv"/>

 <meta name="keywords" content="reklāma"/>

 <title>.: Nosaukums:.</title>

 <link href="base.css" rel="stylesheet" type="text/css">

</head>

<body>

 <div span class="pamats">

   teksts, kas buus necentrēts centrētā elementā!

 </div>

</body>

</html>

Link to comment
Share on other sites

Es tomeer veel nesaprotu dazjas lietas:

1. Naf vajadziigs tas DOCTYPE, un ar ko iisti atskjiras taas 3 dotaas definiicijas (Parastais, Transtional un Frameset)?

2. Kaapec margin-left: auto un margin-right: auto, bet nevis text-align: center (vai kaukaa tamliidziigi tur bija)?

3. Kaa var panaakt, lai teksts (vai citi apakshelementi) ir nevis centreeti, bet vienmeeriigi izdaliiti visaa lapas platumaa (kjipa justify)?

Link to comment
Share on other sites

assaulter
1. Naf vajadziigs tas DOCTYPE, un ar ko iisti atskjiras taas 3 dotaas definiicijas (Parastais, Transtional un Frameset)?

DOCTYPE, manuprāt, nosaka pēc kādiem noteikumiem

pārlūkam jāataino lapa, ja tās nav norādīts tad tas tiek

atstāts pārlūka ziņā. (kā es to saprotu)

---

lūdzu labot, ja nav pareizi

 

Kaapec margin-left: auto un margin-right: auto, bet nevis text-align: center (vai kaukaa tamliidziigi tur bija)?

text-align attiecas uz tekstu, taču manā gadījumā

vajadzēja nocentrēt elementu (bloku) ".pamats"

 

 

Man ar jautājums:

pat uzliekot DOCTYPE "Internet Explorer" elementus, kas

atrodas ".pamats" iekšā izlīdzina pēc centrā, bet FireFox

izlīdzina tikai pašu ".pamats" bloku attiecībā pret body -

respektīvi nelīdzina elementus pēc centra (kas arī ir vajadzīgs).

 

kā lai liek IE strādāt kā FF?

Link to comment
Share on other sites

Pameegjini lietot <span>. <div>, cik esu noveerojis, izpleshas pa visu lapu, kameer <span> piemeerojas satura izmeeram. To vari noskaidrot, uzliekot border: 1px solid red;. Tad ieveertee atskjiriibas IE un FF. Starp citu - tas text-align centree tikpat labi, kaa margin-left/right. Pameegjini! Varbuut tas atrisina Tavu probleemu!

Redigjeets: Starp citu - ar ko tad atskjiras izskataa HTML ar dazjaadiem DOCTYPE?

Link to comment
Share on other sites

Khe, par spiiti visiem, kam nepatiik tabulas, man jaaatziist, ka automaatiskas centreeshanas, izlidzinaashanas utml. lietas visvienkaarshaak ir izdarit tieshi ar taam! Laucnji automaatiski izpleshas vienaadi plati, var uzlikt gan horizontaalo, gan vertikaalo centreeshanu, utml.

Link to comment
Share on other sites

Īsi un vienkārši:

 

position: absolute;

left:50%;

top:50%;

margin-left:-tā vērtība, cik plats tev tas divs, dalīts ar divi. Uzsvars uz mīnus zīmi.

margin-top:tas pats - mīnus cik jau augsts, /2.

 

 

Un rezultātā viš tev stāv pašā centrā.

Link to comment
Share on other sites

Guest bubu
Īsi un vienkārši:

 

position: absolute;

left:50%;

top:50%;

margin-left:-tā vērtība' date=' cik plats tev tas divs, dalīts ar divi. Uzsvars uz mīnus zīmi.

margin-top:tas pats - mīnus cik jau augsts, /2.

 

 

Un rezultātā viš tev stāv pašā centrā.[/quote']

 

Zin kāds šitam mīnuss? Kad maina pārlūka loga izmērus, tad viņš nenovietojas vidū, bet stāv tur kur sākumā bija vidus. A bet ar to margin: auto viņš tiešām stāv vidū! :)

Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share

×
×
  • Izveidot jaunu...