View previous topic :: View next topic
Author
Message
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 01.03.2011 18:27 Post subject: CSS i HTML test border greška
pozdrav svima,
stavio sam si border crvene boje na svaki div kad sam počeo
radit sajt da bolje vidim šta radim ali sad kad maknem border
cijeli layout mi se pomakne prema dolje i u FF i u IE, taj border
je unutar .container class-e "border:1px solid red; "
u glavnom css-u ovdje dolje, znači kad taj border
pobrišem jer mi više nije potreban cijeli sajt mi se
pomakne prema dolje, probao sam svašta ali
nemogu otkrit kako da to popravim, nisam baš
dobar u ovome kao što čete i vidit po mom kod-u
glavni CSS:
Code: html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(iepngfix.htc); }
#main {
background-color:#7b5436;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position:center top;
width:100%;
}
#content {
text-align: left;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
}
#header {
margin-top:198px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position:center top;
min-height:514px;
}
#logo {
margin-top: 0px;
margin-left: -10px;
background: url(images/logo.png);
background-repeat: no-repeat;
height: 326px;
width: 469px;
position: absolute;
z-index:100;
}
#slider {
position: absolute;
margin-top:315px;
margin-left:24px;
z-index:150;
}
ul#sprite_menu {
width: 693px;
list-style: none;
position:absolute;
margin-top:227px;
margin-left:201px;
z-index:200;
}
#footer {
margin-top:100px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
background-position:center top;
min-height:754px;
}
.text_block {
padding:16px;
width:630px;
margin-left:30px;
text-align: left;
}
#content_box {
}
body {
background-color:#7b5436;
font-family:Times new roman;
color:#7f7d78;
font-size:16px;
line-height:19px;
text-align: center;
margin:0 auto;
}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Times new roman;
color:#C29F75;
}
small {
color:#000;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#ffffff;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color: #C00;
}
p {
margin: 0px 0px 15px 0px;
color: #BE9869;
}
a.button {
background:#32312f;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2;
border-color:#007de2;
}
meni CSS:
Code:
* { margin: 0; padding: 0; } /* Reset stuff */
ul#sprite_menu li { display: inline; }
ul#sprite_menu li a {
display: block; float: left; height: 95px;
background-image: url(menu-sprite.png); text-indent: -9999px;
}
ul#sprite_menu li a.pocetna {
width: 96px; background-position: 0 0;
}
ul#sprite_menu li a.onama {
width: 105px; background-position: -96px 0;
}
ul#sprite_menu li a.ponuda {
width: 103px; background-position: -199px 0;
}
ul#sprite_menu li a.akcije {
width: 101px; background-position: -304px 0;
}
ul#sprite_menu li a.trgovine {
width: 98px; background-position: -405px 0;
}
ul#sprite_menu li a.zabavno {
width: 97px; background-position: -503px 0;
}
ul#sprite_menu li a.kontakt {
width: 93px; background-position: -600px 0;
}
ul#sprite_menu li a.pocetna:hover, ul#sprite_menu li a.pocetna:focus {
background-position: 0 -94px;
}
ul#sprite_menu li a.onama:hover, ul#sprite_menu li a.onama:focus {
background-position: -96px -94px;
}
ul#sprite_menu li a.ponuda:hover, ul#sprite_menu li a.ponuda:focus {
background-position: -199px -94px;
}
ul#sprite_menu li a.akcije:hover, ul#sprite_menu li a.akcije:focus {
background-position: -304px -94px;
}
ul#sprite_menu li a.trgovine:hover, ul#sprite_menu li a.trgovine:focus {
background-position: -405px -94px;
}
ul#sprite_menu li a.zabavno:hover, ul#sprite_menu li a.zabavno:focus {
background-position: -503px -94px;
}
ul#sprite_menu li a.kontakt:hover, ul#sprite_menu li a.kontakt:focus {
background-position: -600px -94px;
}
a { outline: none; }
HTML:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NASLOV</title>
<link rel="stylesheet" href="floom/floom.css" type="text/css" media="screen" charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" />
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
<script type="text/javascript" charset="utf-8" src="mootools-core-1.3-full-nocompat.js"></script>
<script type="text/javascript" charset="utf-8" src="mootools-more.js"></script>
<script type="text/javascript" charset="utf-8" src="floom/floom.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(e){
// option 1
var slides = [
{
image: 'nature-photo0.jpg',
caption: 'Ova slika je super'
},
];
// option 2
// var slides = $$('#blinds img');
$('blinds').floom(slides, {
slidesBase: 'slides/',
sliceFxIn: {
left: [20, 0]
}
});
});
</script>
</head>
<body>
<div id="main">
<div class="container">
<div id="menu">
<ul id="sprite_menu">
<li><a href="#pocetna" class="pocetna">pocetna</a></li>
<li><a href="#onama" class="onama">o nama</a></li>
<li><a href="#ponuda" class="ponuda">ponuda</a></li>
<li><a href="#akcije" class="akcije">akcije</a></li>
<li><a href="#trgovine" class="trgovine">trgovine</a></li>
<li><a href="#zabavno" class="zabavno">zabavno</a></li>
<li><a href="#kontakt" class="kontakt">kontakt</a></li>
</ul>
</div>
<div id="logo"></div>
<div id="slider">
<div id="blinds-cont">
<div id="blinds"></div>
</div>
</div>
<div id="header"></div>
</div>
</div>
<div id="content">
<div class="container">
<div id="content_box">
<div class="text_block">
<h2>OVO je naslov h2</h2>
<small>Napisao <a href="">ja</a> tagged <a href="">ovo</a>, <a href="">ono</a></small>
<p>Tekst tekst tekst </p>
<br />
<a href="" class="button">Više o ovome</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html>
Back to top
nel`chee Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
Back to top
Moebius Joined: 26 Jan 2004 Posts: 245 Location: zagreb
Posted: 01.03.2011 20:23 Post subject:
u css-u izbrisi ovo iz #header deklaracije:
Code: margin-top: 198px;
min-height: 514px;
Nema ti to veze s borderima.
Ako radis u FF-u, upoznaj svojeg najboljeg prijatelja - ako se mislis baviti ovim poslom:
http://getfirebug.com/
Ako ti je to stran teren, evo malo uvoda:
http://www.youtube.com/watch?v=FsX6qwQqGgQ
Zapravo bez Firebuga FF i nije nis posebno
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 01.03.2011 20:30 Post subject:
http:// zbrisao sam link dok ne napravim dalje
evo ga online, s ovim sam se namučio jako nije trebao tako izgledat ali sam napravio prekompliciran dizajn pa nisam mogao dobit šta sam htio, još imam puno posla ali sad sam ovdje zapeo i loše mi je
Moebius probao sam ovo izbacit šta si rekao ali onda mi nestane taj div u kojem mi je ta slika ovaj papir ispod, znam da sam zakomplicirao s tim divovima al nikako da drukcije dobijem da ovako izgleda Last edited by [0_o] on 08.03.2011 14:06; edited 1 time in total
Back to top
Moebius Joined: 26 Jan 2004 Posts: 245 Location: zagreb
Posted: 01.03.2011 20:47 Post subject:
ok, sad vidim.
onda ovako:
Code:
#header {
background-image: url("images/header.jpg");
background-position: center bottom;
background-repeat: no-repeat;
min-height: 712px;
}
Primjeti da nema top margine, da je min-height povecan za taj iznos, i da je background pozicioniran bottom.
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 01.03.2011 20:53 Post subject:
ok sad sve radi kako sam zamislio, puno hvala, ako zapnem opet pa vas cimnem ovdje
ako imate kakvih primjedbi s ovim sajtom slobodno pišite, možda nešto naučim šta krivo radim
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 01.03.2011 21:04 Post subject:
dodao sam još i ovaj kod, misli da bi tako trebaolo raditi i na IE6?
Code: #header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position:center bottom;
height:auto !important;
height:712px;
min-height:712px;
}
Back to top
nel`chee Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 04.03.2011 13:25 Post subject:
nemam ie6 instaliran, ali sam gledao na onom browser testu i vidim da mi je cijeli sajt totalni raspad na ie6, znači koda se sve razbacalo na sve strane, koja bi bila najbolja solucija pošto imam windows 7, kako vi testirate odnosno radite code za IE6, dali imate instaliran IE6 i IE7i8 ili neka druga fora, jer čitao sam negdje da ako instliraš ie6 i ie7 da se tuku jedan s drugim u windows 7-mici
Back to top
Moebius Joined: 26 Jan 2004 Posts: 245 Location: zagreb
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Back to top
Aleks CS Joined: 26 Nov 2010 Posts: 10
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 08.03.2011 14:05 Post subject:
misliš? a brijem da bih mogao, ali svejedno mi je sajt u raspadu u nekim drugim browserima
Back to top
[0_o] Joined: 07 Jun 2007 Posts: 42
Posted: 15.03.2011 14:36 Post subject:
ej pozdrav nije me bilo neko vrijeme, nisam ni radio na sajtu, sad imam problem kod IE7, znači navigacija (ul#sprite_menu) mi se pomakne u lijevo samo u ie7, u drugima je ok. code je isti ko ovaj gore u prvom postu
Back to top
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
Powered by phpBB © 2001, 2005 phpBB Group