» »

Podrta oblika strani

Podrta oblika strani

echoman ::

Pozdravljeni,
Začel sem izdelovati novo spletno stran, naj pa pred vso zadevo povem še, da sem začel s sestavljanjem strani popolnoma iz znanja, ki mi je še ostalo v glavi od prej. Najprej sem naredil obliko strani, jo nato razrezal in sedaj delam na osnovni postavitvi le-te. Tu pa se mi je zalomilo že tako rečeno na skoraj čistem začetku, saj stvari ne držijo ravno skupaj.
 Oblika strani

Oblika strani


1. Zaradi padding-a meni ne drži z zgornjim in vsebinskim delom.
2. Besedilo iz vsebinskega predela strani sega na spodnji predel - nogo.
3. Okno z vsebino sem nastavil na repeat-y, kar pomeni, da naj bi se ozadje ponavljalo po osi y, vendar je med samo sliko napaka, saj je vmes nekakšen prazen prostor.

Za celotno stran sem naredil tudi (.)postavitev, kjer sem nastavil, margin:auto za sredinsko postavitev vseh elementov v class-u. Ker to ne dela, me zanima kako bi vse skupaj postavil na sredino (razen vsebine - besedila, slik, ...)?

Še CSS:
body
{
background-color:#c1c1c1;
}

.postavitev
{
margin:auto;
}

.glava
{
background-image:url('slike/zgoraj.png');
background-repeat:no-repeat;
width:1000px;
height:140px;
padding-top:30px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}

.meni
{
background-image:url('slike/meni.png');
background-repeat:no-repeat;
width:1000px;
height:50px;
padding-top:23px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}

.vsebina
{
background-image:url('slike/vsebina.png');
background-repeat:repeat-y;
width:1000px;
height:150px;
padding-top:30px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}

.noga
{
background-image:url('slike/spodaj.png');
background-repeat:no-repeat;
width:1000px;
height:60px;
padding-top:22px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}


V HTML-u so podani le div class-i. Poleg vsega me zanima, če je tako kodiranje primerno za celotno postavitev oblike?

Hvala in lep pozdrav! :)

Haniball ::

1. zmanjšaj padding?
2. imaš znotraj .vsebina floatane div-e? Potem daj classu .vsebina "overflow: hidden;" ali pa da daš .noga classu "clear: both;"
3. to bi moralo delati brez presledka. Verjetno imaš na koncu slike eno vrstico transparentno.

EDIT: glede sredinske poravnave... .postavitev nima določene širine.

Zgodovina sprememb…

  • spremenil: Haniball ()

echoman ::

1. Če zmanjšam padding, potem bo tekst prešel na začetek grafike, kar pa ne bo stilsko lepo.
2. Ne, pod .vsebina nimam floata, ker je to šele popoln začetek oblike - še ni dokončana. Drugo možnost bom seveda preizkusil.
3. Ne vrjamem, da bi bila ravno tista vrstica transparentna, bom pa seveda probal zaporedno vstaviti dve sliki in bom potem videl, če je res to krivo.

Hvala za odgovore! :)

echoman ::

Tako, sedaj mi je končno uspelo izdelati celotno osnovno obliko. Rad bi naredil še lev in desen predel strani, vendar nimam več idej, sem pa nekaj poskušal s floating-om.
 Oblika strani

Oblika strani


Še CSS:
body
{
background-color:#c1c1c1;
}

.postavitev
{
margin:auto;
width:1000px;
}

.glava
{
background-image:url('slike/zgoraj.png');
background-repeat:no-repeat;
width:1000px;
max-height:140px;
padding-top:30px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}

.meni
{
background-image:url('slike/meni.png');
background-repeat:no-repeat;
width:1000px;
max-height:50px;
padding-top:23px;
padding-right:30px;
padding-left:30px;
padding-bottom:8px;
}

.vsebina
{
background-image:url('slike/vsebina.png');
background-repeat:repeat-y;
width:1000px;
padding-top:10px;
padding-right:30px;
padding-left:20px;
padding-bottom:0px;
}

.noga
{
background-image:url('slike/spodaj.png');
background-repeat:no-repeat;
width:1000px;
height:60px;
padding-top:22px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
clear:both;
}


V HTML-u seveda še vedno ostajajo samo div class-i.
S čim sedaj narediti lev in desen predel strani?
Hvala in lep pozdrav :)

Zgodovina sprememb…

  • spremenil: echoman ()

Haniball ::

Znotraj .vsebina daš dva diva .levo in .desno.

CSS:
.vsebina {
overflow: hidden; /* To dodaj obstoječemu classu (glede na to da imaš pri .noga nastavljen clear: both, ti to niti ni bo potrebno) */
}

.levo {
width: 700px;
float: left;
}

.desno {
width: 300px;
float: left;
}


Pomembno je, da seštevek širin ne presega širine .vsebine (ki je trenutno 1000px).
Tako da če boš k .levo in .desno dodajal kakšne paddinge (left in right), boš moral zmanjšati širino.

Primer:
.levo dodaš padding-left: 15px; in padding-right: 20px;
potem moraš širino zmanjšati za 35px, torej je končna širina 665px (glede na moje izmišljene podatke).

echoman ::

Sem dodal in očitno izgleda, da bo za manjšim popravkom vredu.

Kaj je problem sedaj? Ozadje iz .vsebina se na .levo in .desno sploh ne prikaže - v HTML-u še vedno sam div class-i in seveda nekaj "besedila".
 Oblika strani

Oblika strani


CSS:
body
{
background-color:#c1c1c1;
}

.postavitev
{
margin:auto;
width:1000px;
}

.glava
{
background-image:url('slike/zgoraj.png');
background-repeat:no-repeat;
width:1000px;
max-height:140px;
padding-top:30px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}

.meni
{
background-image:url('slike/meni.png');
background-repeat:no-repeat;
width:1000px;
max-height:50px;
padding-top:23px;
padding-right:30px;
padding-left:30px;
padding-bottom:8px;
}

.vsebina
{
background-image:url('slike/vsebina.png');
background-repeat:repeat-y;
width:1000px;
padding-top:10px;
padding-right:30px;
padding-left:20px;
padding-bottom:0px;
}

.levo {
width: 700px;
float: left;
}
 
.desno {
width: 300px;
float: left;
}

.noga
{
background-image:url('slike/spodaj.png');
background-repeat:no-repeat;
width:1000px;
height:60px;
padding-top:22px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
clear:both;
}


Hvala za odgovore!

echoman ::

Problem še vedno ni rešen.

Hvala za pomoč vnaprej! :)

echoman ::

Delno sem težavo rešil, vendar se je takoj pojavila nova. Naredil sem namreč ozadji in obrobi za obe strani (.leva in .desna), ter vendar se pri vsebini pri .desna ozadje in obrobi ne "potegneta" do konca (.noga), ko je več vsebine v predelu .leva .
 Oblika strani

Oblika strani


CSS:
body
{
background-color:#c1c1c1;
}

.postavitev
{
margin:auto;
width:1000px;
}

.glava
{
background-image:url('slike/zgoraj.png');
background-repeat:no-repeat;
width:1000px;
max-height:140px;
padding-top:30px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
}

.meni
{
background-image:url('slike/meni.png');
background-repeat:no-repeat;
width:1000px;
max-height:50px;
padding-top:23px;
padding-right:30px;
padding-left:30px;
padding-bottom:8px;
}

/* .vsebina
{
background-image:url('slike/vsebina.png');
background-repeat:repeat-y;
width:1000px;
padding-top:10px;
padding-right:30px;
padding-left:20px;
padding-bottom:0px;
} */

.levo {
background-color:#FFFFFF;
width:660px;
float:left;
margin-left:8px;
border-left:2px solid #6b6b6b;
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:5px;
}
 
.desno {
width:238px;
float:left;
background-color:#FFFFFF;
margin-right:8px;
margin-bottom:0px;
border-left:2px dashed #6b6b6b;
border-right:2px solid #6b6b6b;
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:5px;
}

.noga
{
background-image:url('slike/spodaj.png');
background-repeat:no-repeat;
width:1000px;
height:60px;
padding-top:22px;
padding-right:30px;
padding-left:30px;
padding-bottom:0px;
clear:both;
}


Zanima me, če bi se dalo tole popraviti, da bi bile obe strani do .noga ne glede katera ima več vsebine?

Hvala! :)

Haniball ::

Diva .levo in .desno sta neodvisna, tako da imata tudi različne višine.
Problem rešiš tako, da div-u, ki obdaja oba (.vsebina?) določiš belo ozadje.

echoman ::

Vendar potem obrobi, ki sem jih nastavil na .leva in .desna oz. predvsem v trenutnem primeru obroba za .desna ne gre do .noga .

Še kakšna ideja?

Hvala! :)

Haniball ::

Tudi obrobi daš k .vsebina classu (tega niti ni smiselno dajati k .levo in .desno).
Glede črtkaste črte pa uporabiš background image na divu .vsebina.

echoman ::

Samo kako potem zmanjšam width, da dodam še border na .vsebina? (Ker imam sedaj le 3 slike - zgoraj, meni, spodaj)

Haniball ::

Širino daš 1000px - širina obeh borderjev (2x 2px). Širina je potem 996px.

echoman ::

Širina sicer ni več taka, saj sem zaradi bele barve vse skupaj popravil. Sem dodal border kar na tisto širino in lepo izpade, vendar še vedno ni to to. Če dodam vsebino do konca - do .noga, potem je za sliko bela barva (zaobljeni robovi) in ne izpade ravno lepo, zato bi moral dati neko stvar pred .noga, saj mi v nasprotnem primeru ne pokaže borderja.

Kot prejšnjič pa mi zagotovo, če dam ozadje v .vsebina tudi tokrat ne bo kazalo ozadja.

Hvala in LP! :)

EDIT: Kaj bi moral dodat k .leva in .desna, da bi šlo vse besedilo, ki bi bilo predolgo v novo vrsto in ne naprej čez druge (naslednje) class-e?

Zgodovina sprememb…

  • spremenil: echoman ()


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151787 (1515) kr?en
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61693 (1573) jonystar
»

Kontaktni Obrazec

Oddelek: Izdelava spletišč
352227 (1596) c3p0
»

Lampp problem

Oddelek: Izdelava spletišč
71595 (1498) Slovenia13
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132903 (2769) Road Runner

Več podobnih tem