fizmati.lv forums
HTML Lapas pielāgošanās Ekrānam - Izdrukas versija

+- fizmati.lv forums (http://fizmati.lv/forums)
+-- Forums: Informācijas tehnoloģiju lietas (/forum-118.html)
+--- Forums: Programmēšana (/forum-125.html)
+--- Pavediens: HTML Lapas pielāgošanās Ekrānam (/thread-3575.html)



HTML Lapas pielāgošanās Ekrānam - ALG - 20.05.2009 21:11

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...!!!


RE: HTML Lapas pielāgošanās Ekrānam - manirviedoklis - 20.05.2009 21:53

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


RE: HTML Lapas pielāgošanās Ekrānam - ALG - 20.05.2009 22:00

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>



RE: HTML Lapas pielāgošanās Ekrānam - manirviedoklis - 20.05.2009 22:28

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.


RE: HTML Lapas pielāgošanās Ekrānam - ALG - 20.05.2009 22:41

es zinu tas nau pareizi ierakstiits... tas taads uzmetums...!!!

kur to Widescreen dabuut....??


RE: HTML Lapas pielāgošanās Ekrānam - Rouziys - 20.05.2009 22:46

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.


RE: HTML Lapas pielāgošanās Ekrānam - ALG - 20.05.2009 23:20

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]


RE: HTML Lapas pielāgošanās Ekrānam - manirviedoklis - 20.05.2009 23:23

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.


RE: HTML Lapas pielāgošanās Ekrānam - ALG - 26.05.2009 10:40

laikam neviens nezin kā... vai ne...???


RE: HTML Lapas pielāgošanās Ekrānam - Toms Mikoss - 26.05.2009 11:48

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


RE: HTML Lapas pielāgošanās Ekrānam - ALG - 27.05.2009 18:01

nekas nesanaak... bljaviens kas notiek... es uzlieku tos style='width:300px;' bet vinjsh vinju tikai samazina... bet neizliidzina... Sad


RE: HTML Lapas pielāgošanās Ekrānam - manirviedoklis - 27.05.2009 18:06

Es tik un tā nesaprotu, ko tu gribi panākt Very Happy


RE: HTML Lapas pielāgošanās Ekrānam - Toms Mikoss - 28.05.2009 10:35

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.


RE: HTML Lapas pielāgošanās Ekrānam - MaFx - 06.07.2009 21:26

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}