Podrta oblika strani @ Slo-Tech

Forum » Izdelava spletišč »
Podrta oblika strani

Podrta oblika strani

echoman :: 6. mar 2011, 19:31

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

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 :: 7. mar 2011, 20:00

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 (7. mar 2011 ob 20:01)

echoman :: 8. mar 2011, 14:28

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 :: 9. mar 2011, 15:07

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

Š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 (9. mar 2011 ob 15:07)

Haniball :: 9. mar 2011, 15:16

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 :: 9. mar 2011, 15:32

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

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 :: 10. mar 2011, 20:18

Problem še vedno ni rešen.

Hvala za pomoč vnaprej!

echoman :: 12. mar 2011, 15:02

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

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 :: 12. mar 2011, 15:07

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 :: 12. mar 2011, 16:18

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 :: 12. mar 2011, 16:30

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 :: 12. mar 2011, 16:48

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

Haniball :: 12. mar 2011, 16:59

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

echoman :: 12. mar 2011, 17:09

Š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 (12. mar 2011 ob 17:17)

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
»	Prikaz strani na različni resoluciji-Joomla jugostyle Oddelek: Izdelava spletišč	15	1930 (1658)	kr?en 26. jun 2014 18:57:18
»	Wampserver in Firefox jonystar Oddelek: Izdelava spletišč	6	1843 (1723)	jonystar 4. maj 2012 07:59:32
»	Kontaktni Obrazec Maverick33 Oddelek: Izdelava spletišč	35	2320 (1689)	c3p0 19. nov 2009 15:21:16
»	Lampp problem Slovenia13 Oddelek: Izdelava spletišč	7	1692 (1595)	Slovenia13 17. avg 2009 10:10:02
»	CSS background-image in IE6? para! Oddelek: Izdelava spletišč	13	3064 (2930)	Road Runner 12. jun 2008 19:07:09

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Izdelava spletišč »
Podrta oblika strani

Podrta oblika strani