...

View Full Version : Resolved CSS margins



samih96
01-20-2012, 06:03 PM
Hi there,

I found out that it is not good to use margin-top:-10px; or any other number of negative pixels, If I want to position a element what can i use?

I have tried margin-bottom:10px; but that didn't work.

Thanks,

Samih.

Excavator
01-20-2012, 07:13 PM
Hello again samih96,
Negative margins have their uses but there are better ways to do your basic page layout.

Have a look at this float tutorial (http://www.tizag.com/cssT/cssid.php) that shows how to put things beside each other.

Can you show us your specific issue where a 10px bottom margin doesn't work for you? It's a pretty good bet someone here has run into the same thing and knows how to fix it.

samih96
01-20-2012, 08:00 PM
Hi Excavator,

It seems like your the expert with the CSS topic on this website. So i here is all the codes that i have typed:


<!DOCTYPE HMTL>

<!-- Designed and Coded by Samih Soylu -->

<html>
<head>
<title>SamihSoylu - Home</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>

<body class="center">
<!-- Navigation Start -->
<div id="wrapper">
<div id="logo">
<img src="images/logo.jpg" alt="logo" />
</div>

<div id="navigation">
<ul>
<a href="home.html"><span><li class="active">Home</li></a></span>
<a href="portfolio.html"><span><li>Portfolio</li></a></span>
<a href="contact.html"><span><li>Contact Us</li></a></span>
</ul>
</div>
</div>
<!-- Navigation End -->
</body>
</html>

CSS:


@charset "UTF-8";
body {
background-color:#ffffff;
}
* {
margin:0;
padding:0;
}
.center {
margin:auto;
}
/*Navigation Start*/
#wrapper {
background-image:url('../images/nav-bg.jpg');
background-repeat:repeat-x;
width:100%;
}
#logo {
margin-left:150px;
}
#navigation {
list-style: none;
}
#navigation li {
float: left;
height: 26px;
padding-left: 10px;
margin: 0 5px;
}
#navigation li.active, #navigation li:hover {
background:url("../images/nav-left.jpg") top left #FFF;
background-repeat:no-repeat;
}
#navigation li.active a, #navigation li:hover a {
background:url("../images/nav-right.jpg") top right #FFF;
background-repeat:no-repeat;
color: #000;
font: 12px normal arial;
text-decoration:none;
font-weight: 900;
line-height: 26px;
}
#navigation li.active a span, #navigation li:hover a span {
display: inline-block;
border-top: solid 1px #fff;
height: 25px;
}
#navigation li a {
line-height: 26px;
color: #FFF;
height: 26px;
font-size: 12px;
font-family: arial;
padding-right: 10px;
float: left;
}
/*Navigation End*/

Thanks,

Samih.

Excavator
01-20-2012, 08:17 PM
Your first step should be fixing the errors in your code.
See the links about validation in my signature line, the validator can really help you.

samih96
01-20-2012, 09:31 PM
Your first step should be fixing the errors in your code.
See the links about validation in my signature line, the validator can really help you.

EDIT: Im having a look.

Excavator
01-20-2012, 09:39 PM
It's telling you you're putting span, anchor and li tags in the wrong order.
Should be more like this -

<ul>
<li><a href="#"><span></span></a></li>
</ul>

But why the span at all? It's not doing anything yet, maybe you have something in mind later on in development...

samih96
01-20-2012, 10:10 PM
It's telling you you're putting span, anchor and li tags in the wrong order.
Should be more like this -

<ul>
<li><a href="#"><span></span></a></li>
</ul>

But why the span at all? It's not doing anything yet, maybe you have something in mind later on in development...
Hi,

I have had a bit of a time to think, I have re-ordered the navigation.

<div id="navigation">
<ul>
<li class="active"><a href="home.html"><span>Home</span></a></li>
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
So it was like you said. I accept that I haven't positioned them correctly, I will try to avoid from this happening again.

For your information this is what span does:

#navigation li.active a span, #navigation li:hover a span {
display: inline-block;
border-top: solid 1px #fff;
height: 25px;
}

I dont think i haven't clearly pointed out what i want to do:

http://dl.dropbox.com/u/55534911/01.png

i want to try and avoid using margin-top: -10px;

Excavator
01-21-2012, 12:28 AM
It's difficult for me to see where your li is supposed to go from the code alone since I have none of your images. Usually, in a case like this, a link to the test site simplifys things.

If #logo is the full width blue element with the s/s url image, then your ul#navigation should be in #logo as well.

Have a look at some menu's here (http://nopeople.com/CSS%20tips/index.html) to get an idea how they are placed.

Put up a test site and let us see the images and the most current version of your code.

daretomk
01-21-2012, 01:43 AM
Yeah, sometimes I got that problem too... cant margin-bottom and can negative margin-top. Tried with paddings but no fix at all... is there a fix for this ?

lookkool3
01-21-2012, 05:39 AM
@ samih96 i seen a video where this kid explains how to make the nav bar like you want well at least i think its kinda like what your trying to do

heres the first video he just makes a mockup of his navigation bar in photoshop (probably not going to be much help but i thought i'd throw the link up anyway since this is the start of the nav bar)
http://www.youtube.com/watch?v=otk9Lgvbykg



heres the video where he starts coding the whole website he made in photoshop (in part 2 he actualy starts coding the navbar)
http://www.youtube.com/watch?v=DpNHnPPaQXg&
www.youtube.com/watch?v=v9Iina-sEs4&

samih96
01-21-2012, 03:01 PM
@ samih96 i seen a video where this kid explains how to make the nav bar like you want well at least i think its kinda like what your trying to do

heres the first video he just makes a mockup of his navigation bar in photoshop (probably not going to be much help but i thought i'd throw the link up anyway since this is the start of the nav bar)
http://www.youtube.com/watch?v=otk9Lgvbykg



heres the video where he starts coding the whole website he made in photoshop (in part 2 he actualy starts coding the navbar)
http://www.youtube.com/watch?v=DpNHnPPaQXg&
www.youtube.com/watch?v=v9Iina-sEs4&

Thank You. Problem is solved :).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum