Rakstīt ziņojumu 
 
Pavediena vērtējums:
  • 0 balsis - 0 vidējais
  • 1
  • 2
  • 3
  • 4
  • 5
HTML Lapas pielāgošanās Ekrānam
Autors Ziņa
ALG Atslēdzies
Member
***

Ziņojumi: 112
Pievienojās: Apr 2006
Reputācija: -8
Ziņojums: #1
HTML Lapas pielāgošanās Ekrānam
Sveiki... man interese kā var uzrakstīt HTML kodu tā lai tā mājas lapa kad atver viņu pielāgojas ekrānam piem kvadrātveida ekrānam viss OK itkā bet uz tiem plakanajiem, lielajiem taisnstūrveida ekrāniem teksts aizslīd prom uz kreiso malu... liku visādu center bet nekā un tas pats ar footer viņš visās lapās nau apakā vienādi... kāds varbūt zin kā to visu labot meklēju internetā un lasīju bet tur runa vienmēr ir par kaut ko citu...!!!
(Šo ziņojumu pēdējo reizi modificēja: 20.05.2009 21:24 ALG.)
20.05.2009 21:11
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
manirviedoklis Atslēdzies
un vienmēr būs
****

Ziņojumi: 307
Pievienojās: Oct 2008
Reputācija: 0
Ziņojums: #2
RE: HTML Lapas pielāgošanās Ekrānam
kā tev var pielāgoties kvadrātveida, bet izslīdēt taisnstūrveida...? Very Happy starp citu to sauc par WideScreen
labāk kodu ieraksti te, lai redz cik tev viņš škībs
20.05.2009 21:53
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
ALG Atslēdzies
Member
***

Ziņojumi: 112
Pievienojās: Apr 2006
Reputācija: -8
Ziņojums: #3
RE: HTML Lapas pielāgošanās Ekrānam
Kods:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Uzvaras vidusskola: Izglītības programmas</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="sakums.html" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {
    border-style: inset;
    border-color: #008000;
}
.newStyle1 {
    border: thin double #C0C0C0;
}
.style5 {
    color: #00FF00;
}
.style6 {
    border: 2px solid #C0C0C0;
    text-align: center;
}
.style7 {
    text-align: left;
}
.style8 {
    text-align: center;
}
</style>
<script type="text/javascript">
<!--
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>

<body onload="FP_preloadImgs(/*url*/'button7.jpg',/*url*/'button8.jpg',/*url*/'buttonD.jpg',/*url*/'buttonE.jpg',/*url*/'button14.jpg',/*url*/'button15.jpg',/*url*/'button1A.jpg',/*url*/'button1B.jpg',/*url*/'button26.jpg',/*url*/'button27.jpg',/*url*/'button4D.jpg',/*url*/'button4E.jpg',/*url*/'button50.jpg',/*url*/'button51.jpg')" background="background.jpg">

<div class="style8">

<div id="masthead" style="height: 120px">
    <img alt="" class="style1" height="114" src="banner.jpg" width="939" /></div>
    <a href="index.html">
    <img id="img1" alt="Sākums" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button8.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button3.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button7.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button7.jpg')" src="button3.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold" fp-title="Sākums" --></a><a href="parskolu.html"><img id="img3" alt="Par Skolu" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button15.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button13.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button14.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button14.jpg')" src="button13.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold; fp-font-size: 9" fp-title="Par Skolu" --></a><a href="vest.html"><img id="img4" alt="Vēstures mirkļi" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button1B.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button19.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button1A.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button1A.jpg')" src="button19.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold; fp-font-size: 9" fp-title="Vēstures mirkļi" --></a><a href="izgprog.html"><img id="img5" alt="Izglītības programmas" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button27.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button25.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button26.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button26.jpg')" src="button25.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold; fp-font-size: 8" fp-title="Izglītības programmas" --></a><a href="intizg.html"><img id="img6" alt="Interešu izglītība" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button4E.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button4C.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button4D.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button4D.jpg')" src="button4C.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold" fp-title="Interešu izglītība" --></a><a href="galerija.html"><img id="img7" alt="Galerija" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button51.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button4F.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button50.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button50.jpg')" src="button4F.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold" fp-title="Galerija" --></a><a href="kontakti.html"><img id="img2" alt="Kontakti" height="27" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'buttonE.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'buttonC.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'buttonD.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'buttonD.jpg')" src="buttonC.jpg" style="border: 0" width="135" /><!-- MSComment="ibutton" fp-style="fp-btn: Braided Row 2; fp-font-style: Bold; fp-font-size: 9" fp-title="Kontakti" --></a><hr class="style5" />

    <div class="style7">

    <br />
        <p align="center"><span style="font-size: 28pt;">
        <font color="#000000" size="5"><b>
        <span style="font-family: 'revue tl';"><em>Skola piedāvā apgūt</em></span></b></font></span></p>
        <p class="MsoNormal" style="margin-left: 18pt;"><b><span>
        <font color="#000000" size="4">
        <span style="font-size: 13.5pt; color: black; font-family: 'revue tl';">
        Vispārējās pamatizglītības programmu</span></font></span></b></p>
        <p class="MsoNormal" style="margin-left: 18pt;"><b>
        <font color="#000000" size="4">
        <span style="font-size: 13.5pt; color: black; font-family: 'revue tl';">
        Vispārējās vidējās izglītības vispārizglītojošā virziena programmu</span></font></b></p>
        <p class="MsoNormal" style="margin-left: 18pt;"><b>
        <font color="#000000" size="4">
        <span style="font-size: 13.5pt; color: black; font-family: 'revue tl';">
        Vispārējās vidējās izglītības matemātikas, dabaszinību un tehnikas
        virziena programmu</span></font></b></p>
        <p class="MsoNormal" style="margin-left: 18pt;"><b>
        <font color="#000000" size="4">
        <span style="font-size: 13.5pt; color: black; font-family: 'revue tl';">
        7.-9.klašu skolēniem matemātiku un angļu valodu diferencēto spēju līmeņu
        grupās</span></font></b></p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    </div>

</div>

</body>
<div id="copyright" style="height: 20px" class="style6">
        <strong>Uzvaras vidusskola</strong></div>

</html>
20.05.2009 22:00
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
manirviedoklis Atslēdzies
un vienmēr būs
****

Ziņojumi: 307
Pievienojās: Oct 2008
Reputācija: 0
Ziņojums: #4
RE: HTML Lapas pielāgošanās Ekrānam
Laughing

Kods:
</body>
<div id="copyright" style="height: 20px" class="style6">
        <strong>Uzvaras vidusskola</strong></div>
</html>
fail

validator.w3.org Razz

un tev vispār nekur nav rakstīts par kaut kādu platumu
man ir Widescreen un nekas neaizslīd pa kreisi.
20.05.2009 22:28
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
ALG Atslēdzies
Member
***

Ziņojumi: 112
Pievienojās: Apr 2006
Reputācija: -8
Ziņojums: #5
RE: HTML Lapas pielāgošanās Ekrānam
es zinu tas nau pareizi ierakstiits... tas taads uzmetums...!!!

kur to Widescreen dabuut....??
20.05.2009 22:41
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
Rouziys Atslēdzies
Mētāties, mētāties un vēlreiz mētāties
****

Ziņojumi: 340
Pievienojās: Aug 2007
Reputācija: 2
Ziņojums: #6
RE: HTML Lapas pielāgošanās Ekrānam
css'ā ieraksti
#copyright{
margin-left:auto;
margin-right:auto;
}
Tas tieši divīziju izlīdzinās pēc abām malām, ja es nekļūdos.
20.05.2009 22:46
Apskatīt lietotāja interneta adresi Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
ALG Atslēdzies
Member
***

Ziņojumi: 112
Pievienojās: Apr 2006
Reputācija: -8
Ziņojums: #7
RE: HTML Lapas pielāgošanās Ekrānam
bļāviens nesanāk... nekādīgi... tas sanāk apmeeram šādi... Pielikumā...
bet man vajag lai nau ārpus tās saucamās galvenes...!!!
[Bilde 19845535.jpg]
(Šo ziņojumu pēdējo reizi modificēja: 20.05.2009 23:57 ALG.)
20.05.2009 23:20
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
manirviedoklis Atslēdzies
un vienmēr būs
****

Ziņojumi: 307
Pievienojās: Oct 2008
Reputācija: 0
Ziņojums: #8
RE: HTML Lapas pielāgošanās Ekrānam
Kods:
.blabla {
margin:0 auto;
}
šis iecentrē.

bet ja tas ir <div> tad obligāti vajag arī "width"
jo <div> pēc noklusējuma ir 100% width
līdz ar to nevar iecentrēt kaut ko, kas aizņem visu platumu.

un labāk laikam uzzīmē zīmējumu Very Happy
nesaprotu, ko kur tu gribi dabūt.
(Šo ziņojumu pēdējo reizi modificēja: 20.05.2009 23:23 manirviedoklis.)
20.05.2009 23:23
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
ALG Atslēdzies
Member
***

Ziņojumi: 112
Pievienojās: Apr 2006
Reputācija: -8
Ziņojums: #9
RE: HTML Lapas pielāgošanās Ekrānam
laikam neviens nezin kā... vai ne...???
26.05.2009 10:40
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
Toms Mikoss Atslēdzies
DatZ
****

Ziņojumi: 295
Pievienojās: Aug 2006
Reputācija: 1
Ziņojums: #10
RE: HTML Lapas pielāgošanās Ekrānam
Izlasi iepriekšējo postu. Teksti visi atrodas kastē - <div>'ā. Un attēlā šis <div> jau ir iecentrēts. Bet tā kā tam kā platums ir uzstādīts 100%, tad tas aizņem visu pieejamo platumu, un nekādu centrējumu tu neredzi. Uzliec <div> elementam width uz kaut ko mazāku, un jau redzēsi panākumus. Pamēģni, piemēram, uzlikt platumu vienādu ar headerī esošo bildi. Ja tā ir 300 px plata, tad iekš <div> taga ieraksti style='width:300px;' un priecājies Smile
26.05.2009 11:48
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
ALG Atslēdzies
Member
***

Ziņojumi: 112
Pievienojās: Apr 2006
Reputācija: -8
Ziņojums: #11
RE: HTML Lapas pielāgošanās Ekrānam
nekas nesanaak... bljaviens kas notiek... es uzlieku tos style='width:300px;' bet vinjsh vinju tikai samazina... bet neizliidzina... Sad
27.05.2009 18:01
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
manirviedoklis Atslēdzies
un vienmēr būs
****

Ziņojumi: 307
Pievienojās: Oct 2008
Reputācija: 0
Ziņojums: #12
RE: HTML Lapas pielāgošanās Ekrānam
Es tik un tā nesaprotu, ko tu gribi panākt Very Happy
27.05.2009 18:06
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
Toms Mikoss Atslēdzies
DatZ
****

Ziņojumi: 295
Pievienojās: Aug 2006
Reputācija: 1
Ziņojums: #13
RE: HTML Lapas pielāgošanās Ekrānam
Ja tu gribi, lai teksts pats būt lapas paša vidū
šādi,
izlabo šajā fragmentā
Kods:
.style7 {
    text-align: left;
}
no left uz center.

Kāpēc lai to darītu - nezinu. Izskatās drausmīgi.
(Šo ziņojumu pēdējo reizi modificēja: 28.05.2009 10:39 Toms Mikoss.)
28.05.2009 10:35
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
MaFx Atslēdzies
IT freak
**

Ziņojumi: 1
Pievienojās: Jun 2009
Reputācija: 0
Ziņojums: #14
RE: HTML Lapas pielāgošanās Ekrānam
Ja pareizi sapratu tad tu gribi to visu vidusdaļu tādā pašā platumā, kā headeris???
Ja tā tad tas viss ir vienkārši:
visu lapas saturu ieliec jaunā div'ā <div class="container">
CSS'ā nodefinē stilam container tādu platumu, kādu tev vajag visai lapai [aptuvenais headera platums]
kā arī margin:auto;
.container {width:YYYpx; margin:auto}
06.07.2009 21:26
Atrast visus šī lietotāja rakstītos ziņojumus Citēt šo ziņu atbildē
Rakstīt ziņojumu 


Lēciens uz forumu:



Kontaktifizmati.lvAtgriezties uz augšuAtgriezties pie saturaArhīva skatsRSS sindikācija