mi3dot.org :: View topic - CSS i pozadina

Forum FAQ

Memberlist

Forum ignore list

Profile

CSS i pozadina

This forum is locked: you cannot post, reply to, or edit topics.

This topic is locked: you cannot edit posts or make replies.

mi3dot.org Forum Index -> Client-side

View previous topic :: View next topic

Author

Message

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 17.12.2006 23:06 Post subject: CSS i pozadina

Želio bi stavit ovakvu pozadinu na stranicu.

Izrezao sam dio veličine 50*50, i stavio ovakav kod:

Code:

body
{
background-image: url('pattern.jpg');
background-repeat: repeat;
}

No problem je u tome što svaki novi red izgleda ko da je malo pomaknut u desno i crte se ne poklapaju.
Sad da li sam krivo izrezao ili krivo napisao kod?

Pekx

Joined: 09 Sep 2004
Posts: 559

Posted: 17.12.2006 23:13 Post subject:

krivo si izrezao, i zasto ne napravi manji bg? tipa 5x5 ili 10x10px

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 17.12.2006 23:21 Post subject:

izrezao sam manji bg, probao sam i sa 5x5, 2x2 i sve daje iste rezultate ona gore slika je slika cijele pozadine, tj. takav bi trebao biti krajnji rezultat da li mi možeš reć kako bi trebao pravilno izrezat

nel`chee

Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

Posted: 18.12.2006 00:01 Post subject:

tako da pazis da ti se pixel na istoj visini ne ponavlja s obje strane slicice. prouci http://mi3dot.org/tutorials/comments/28/
_________________ ♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 18.12.2006 11:44 Post subject:

uspio sam tako da sam odrezao dio počevši od kuta one slike hvala za link

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 20.12.2006 00:12 Post subject:

Da ne otvaram novu temu, pa ću ovdje stavit:

Imam sljdeći problem, želim pomoću css-a napraviti 2 stupca.
Oni se nalaze na/u layeru main koji iscrtava pozadinu. I sve je uredu dok je tekst u stupcima kraći od 600px, ali čim postane duži ti layeri stupci prijeđu preko pozadine. Kad maknem float:left; pozadina prati tekst, ali naravno nisu više kao stupci već kao redci. Ali naravno to ne želim, pa ako neko zna kako da riješim problem.

Code:

#main {
text-align: left;
min-height: 600px;
width: 670px;
background-color: #01151f;
}

#novosti {
float:left;
background-color: #0b2837;
width: 420px;
}

#side_box {
background-color: #0b2837;
float:left;
margin-left: 30px;
width:200px;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style_2.css" type="text/css" />
<title>Test</title>
</head>

<body>
<div id="main">
<div id="novosti">
Ovdje ide dugačak tekst

</div>
<div id="side_box">

dugačak tekst

</div>
</div>
</body>
</html>

strija

Joined: 14 Sep 2003
Posts: 473
Location: Čakovec

Posted: 20.12.2006 01:21 Post subject:

Iza diva sa id-om side_box dodas jos jedan div:

Code:

A CSS za taj div izgleda otprilike ovako:

Code:

.clear { clear: both; height: 1px; overflow: hidden; }

Naravno ovo je moguce i bez dodatnog div elementa, ali ovako je najjednostavnije.

_________________
We can exist in ambiguity, but it means the deepest loneliness. | creolab.hr | thefarewellreason.com

mile

Joined: 10 Sep 2003
Posts: 1327
Location: Jeruzalem

Posted: 20.12.2006 01:25 Post subject:

bit će OK, samo nastavi dodavati elemente i na zadnji dodaj clear, like so:

Code:

#pero {clear: both}

Code:

<body>
<div id="main">
<div id="novosti">
Ovdje ide dugačak tekst

</div>
<div id="side_box">

dugačak tekst

</div>
<div id="pero">Copyright Pero d.o.o.</div>
</div>
</body>
</html>

EDIT: evo dok ja sporo tipkam..

_________________
mile.is

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 20.12.2006 01:45 Post subject:

hvala, svaka vam čast, radi super stvar

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 26.12.2006 17:07 Post subject:

imam problem da mi side_box prelazi preko okvira u ie6 jer ne radi min-height, ako stavim height onda u ff i operi se crna pozadina ne produžuje s dodavanjem npr. teksta, a u ie6 se produžuje.

pa da li se nešto može iskemijat da main layer shvaća side box layer kao sadržaj, nešto slično kao rješenje post iznad.

imam ovakav css i html

Code:

Code:

* {
margin:0px;
padding:0px;
}

body {
background: #013358 url(slike/pattern.gif);
background-repeat: repeat;
color: #bad4e1;
font-size: 11px;
font-family: arial, "lucida console", sans-serif;
}

#gradijent {
background: url(slike/pattern_grad.gif) repeat-x;
width: 100%;
text-align: center;
position: relative;
}

#okvir {
margin: 0 auto;
height: 100%;
width: 750px;
position: relative;
padding: 125px 0px 125px 0px;
}

#glava {
width: 701px;
height: 26px;
position: relative;
margin: 0 auto;
background-image: url(slike/glava.gif);
display: block;
}

#rep {
width: 701px;
height: 36px;
position: relative;
margin: 0 auto;
background-image: url(slike/rep.gif);
display: block;
}

#sadrzaj {
position: relative;
display: block;
min-height: 600px;
width: 639px;
margin: 0 auto;
text-align: left;
background-color: #01151f;
padding: 0px 30px 0px 30px;
}

#nav_gore {
position: relative;
display: block;
background-color: #01151f;
width: 639px;
height: 48px;
}

#main {
position: absolute;
text-align: left;
width: 639px;
padding: 50px 0 50px 0;
}

#side_box {
position: relative;
left: 440px;
top: 40px;
width: 300px;
height:202px;
}

#box {
position:relative;
width: 231px;
height: 647px;
background: url(slike/box.png) no-repeat;
display: block;
}

.clear {
clear: both;
height: 1px;
overflow: hidden;
}

maXimus

Joined: 05 Dec 2005
Posts: 55
Location: Zagreb

Posted: 26.12.2006 18:25 Post subject:

problem sa min-height sam riješio sa ovim

Code:

#proba {
min-height:500px;
height:auto !important;
height:500px;
}

ali me zanima, ako imam sliku boxa veliku 647px, i side_box layer sam riješio sa kodom iznad, ali ako stavim da mi je sadrzaj layer min-height: 300px tada side_box layer viri preko crne pozadine kao na slici, da li postoji neki drugi način da to riješim

Sulien

Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

Posted: 27.12.2006 15:34 Post subject:

Ne razumiješ float model i clearing. Makni sve height deklaracije i napravi taj layout kako se spada: tips za float clearing i self-clearing imaš na jednoj svježoj diskusiji http://www.mi3dot.org/forum/viewtopic.php?t=10277

Display posts from previous:

	mi3dot.org Forum Index -> Client-side	All times are GMT + 1 Hour
Page 1 of 1

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum