| SitePoint Sponsor |
Hi all,
I´m trying to do the following:
Add an background image in the top <div> of the three column layout, ok i could do that. then i want to insert, right below this background image, a nav bar using lists, but all i can get is the background image getting pushed up and the nav bar creates extra space ( even using padding and margin 0 ) If someone can help me with some advice, or even give me a link to some good page that can help me out with some answers, I´ll be very thankful.
Thanks all!!
Can we see some code please
With lists you need to control the margins and padding on both the ul and the li.
Paul
Hi,
Here´s the code. The list keeps creating extra spacing, maybe i´m not using the padding and margin: 0 at the right place so i need some advice.
Thanks!
<html>
<head>
<title>Three Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* The text-align: center; is used to prevent the following browsers from not centering the containing blocks: * NN4 (Mac and Win) * Win/IE4 * Win/IE5 * Win/IE5.5 * Win/IE6 (when in quirks-mode) using this will only take effect in those browser, the CSS code will overall it in browsers tha support the code */
body { text-align: center; }
/* Entire Page (Container) */
#container {
width: 759px;
margin: 10px auto;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%; }
/* Heading (Cabeçalho) */
#top {
background-image: url("assets/img1.gif");
background-position: top right;
background-attachment: fixed;
background-repeat: no-repeat;
padding: 2.2em;
background-color: #ddd;
border-bottom: 1px solid gray; }
/* Exemplo de "Descendant Selector" */
#top h1 {
padding: 0;
margin: 0; }
/* Leftnav (Navegação da Esquerda */
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em; }
/* Rightnav (Navegação da Direita) */
#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em; }
/* Content (Corpo - Coluna Principal) */
/* The max-width: 36em, sets the maximum width on the main content. Although IE browsers will ignore the rule, the other standard compliant browsers will not alow the content area to go wider than the width you specify. */
#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em; }
/* Footer (Rodapé) */
/* The clear: both; command will force the footer below any floated elements above. */
#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray; }
/* To remove the space above content in the "lefnav", "rightnav" and "content" */
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
/* Este id serve para alinha os campos de preenchimento de acordo com o gráfico, assim como customizar os campos */
#campo1 input {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000;
background color: #fff;
border: 1px solid gray; }
#campo1 {
font-family: Tahoma, Arial, sans-serif;
font size: 12px;
color: #000;
float: right;
margin-right: 5em; }
/* Navbar (Barra de Navegação) */
#navbar ul li {
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #000;
list-style-type: none;
border: 1px solid gray;
text-align: center;
display: inline;
margin: 0;
padding: 0; }
/* Este comando serve para esconder as sublistas que serão mostradas apenas com o rollover */
#navbar li ul {
display: none; }
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
<div id="campo1">Intranet - Usernameinput type="text" name="user"> Senha
<div id="navbar">
<ul>
<li>A Empresa
<li>SIGEM
<ul>
<li>Sigem Protocolo</li>
<li>Sigem Finanças</li>
<li>Sigem Legislativo</li>
<li>Sigem Tributação</li>
<li>Sigem Saúde</li>
</li>
</ul>
<li>JGRADE</li>
<li>Downloads</li>
<li>Contato</li>
<li>Página Principal</li>
</li>
</ul>
</div>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Hi,
If you are talking about the default margins of the ul then the answers the same as I gave you in the other post which you have failed to implement
An easy way to set all the margins and padding to zero is to use the universal selector as follows.Code:#navbar ul {margin:0;padding:0}
That will set the margins and padding of all elements to zero but means that you will have to explicitly set them yourself.Code:* {margin:0;padding:0}
Your background image is not correct in mozilla browsers because you have used background fixed which is relative to the viewport and not the element is applied to. That means it will only show in that element if it happens to be over the position that you have placed the image.
Take out the background fixed altogether as I assume you just want it in the element itself.
e.g.use this shorthand to define everything in one go.
PaulCode:background:#ddd url(assets/img1.gif) no-repeat right top;
Posting Permissions
Bookmarks