I´m trying to put the navigation bar in the header div but its being pushed out of it.. so the navigation bar is appearing in the center of the page.
Do you have any suggestions on how to fix this? Thanks for the help!
Here´s my HTML
<body>
<div class="fondo">
<div class="header"> <!--barra de navegacion -->
<div class="logo">
<object data="/Users/MaxRuizTagle/Desktop/guardado por illustrator/been.svg" type="image/svg+xml" alt="logo">
<!--[if lte IE 8 ]-->
<img src="/Users/MaxRuizTagle/Desktop/guardado por illustrator/images/been.png" alt="Logo"/>
<!--[endif]-->
</object>
</div>
<div class="container">
<div class="sixteen columns">
<ul id="nav">
<li> HOME</li>
<li>SPEISEKARTE</li>
<li>RESERVIERUNG</li>
<li>LOCATION</li>
<li>JOBS</li>
<li>KONTAKT</li>
<li>DJs</li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
and CSS
body {
margin: 0 0 0 0;
height:1000px;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, sans-serif;
}
.fondo {
min-width:100%;
min-height: 80%;
background-image: url('../Img/imagenes/fotoportada.jpg');
background-size: cover;
position: absolute;
background-repeat: no-repeat;
}
.header {
min-width: 100%;
min-height: 100px;
max-height:100px;
background-color:rgb(255,255,255);
}
.footer {
background-color:rgb(28,92,144);
min-width: 100%;
height:400px;
position: absolute;
top: 100%;
}
ul#nav {
margin: 147px 0 0 120px;
float: left;
}
ul#nav li{
margin-right: 30px;
font-size: 1.1em;
display: inline;
}
.logo {
max-width: 20%;
}
.logo object, img {
min-width:100%;
float:left;
position: relative;
top:-25px;
}
You've set a top margin of 147px to the ul#nav element. that's why it's pushed down. change that and set a proper value.
ul#nav {
/* margin: 147px 0 0 120px; */
float: left;
}
JSBin Demo.
You're pushing the element down to the middle of the page with margin, and your float:left is causing it to appear below the logo.
Try this CSS:
ul#nav {
margin-left: 20%;
}
I had same kind of issue, turned out to be an extra closed tag without an opening tag.
Related
Right now I have a footer that is always at the bottom of the page. This is fine until I have more content than can fit on the page, which means when you scroll down, the footer scrolls up as if its fixed..
Here is my CSS:
.footerWrap{
clear: both;
position:absolute;
width:100%;
bottom:0;
}
.footer {
position: relative;
margin-bottom: 0px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #000000;
color: #FFFFFF;
}
.footerLinks{
padding-left: 150px;
text-align: left;
}
.footerLinks p {
display: inline;
}
.footerLinks a {
color: #169e98;
}
.footerSocial{
text-align: right;
}
And my HTML:
<!--Footer-->
<div class="footerWrap">
<div class="footer">
<div class="footerLinks">
Privacy Policy<p> |</p>
Sitemap<p> |</p>
<p>© 2017</p>
</div>
<div class="footerSocial">
<img src="image/findfb.png" alt="Find us on Facebook">
</div>
</div>
</div>
Essentially, I want to put the footer Div below the text content.
it is very easy :
wrap your html code in
<div class="page">
...
</div>
and just add css
.page{
position:relative;
}
that is all
I'm not sure where my code is messed up, but I'm trying to get my code to center. Here is what I have so far:
The problem that I am running into is that the page won't actually center. When it loads, the left margin is only a 10px. I'm sure there is a conflict somewhere, or I just borked something, and I've been searching for hours now, and have found nothing. Here is the following code:
body {
background-color: #12121D;
}
#contain {
display: block;
width: 1000px;
margin: 0 auto;
}
.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}
#header {
width: 1000px;
height: 230px;
}
#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
}
#banner {
text-align: right;
float: right;
z-index: -1;
}
#menu {
height: 80px;
margin: 0 auto;
}
#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
}
#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
}
And the html follows as:
<body>
<div id="contain">
<div id="header">
<div id="logo"> <img src="images/logo.png" alt="logo" />
<br />
<a class="version" href="JavaScript:changeSheets(1)">View Mobile<a/>
</div>
<div id="banner"><img src="images/banner.png" alt="banner"/></div>
</div>
<div id="menu">
<div class="pages">
<ul>
<li>Front Page</li>
<li>Reviews</li>
<li>Releases</li>
<li>About Me</li>
<li>Contact Info</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
<h1>Why am I doing this?</h1>
<br />
Insert text here
<h1>What is my goal?</h1>
Insert text here
</div>
</div>
</div>
</div>
</body>
Hi there is Your code:
http://jsfiddle.net/w9Zgc/2/
On my screen larger 1920px page is centered. I think that you have screen resolution close to 1024px width so than left margin left equal 10px is quite reasonable. Another advice is to reset padding and margin of body
body, html {
padding:0;
margin: 0;
}
One thing that will help you center a div is to specify the width, and then set the right & left margins to auto:
#main{
width: 850px;
margin-left: auto;
margin-right: auto;
}
Judging from your link at http://jsbin.com/itiwez/2/edit
I removed #charset "utf-8" in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format?
FYI: Why specify #charset "UTF-8"; in your CSS file?
Just a forewarning, I am new to HTML and CSS. Please be patient with my inquiry here.
I am attempting to center the navigation bar while overlapping it on the bottom side of the banner. I have a banner image at the top and a background image for the main content which is positioned just below the nav bar. I've attempted to add the following:
ul.navbar li {
float: left}
This floated the nav bar directly underneath the main body background instead of above everything. In order to get the list in a horizontal format i used
ul.navbar li {
display: inline-table}
This was the only variation that would give me the correct horizontal format I was looking for. Now I just need it centered and overlaid on the bottom end of my banner image. Any suggestions? My HTML and CSS is as follows:
CSS:
body {
padding-left: 9em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #6699FF;
background-color: white
}
div#contentareamain1 {
background: url(contentareamain1.png) no-repeat;
background-color: white;
color: white;
height: 634px;
position: relative;
}
div#contentareamain1text {
position: relative;
height: auto;
width: 700px;
left: 5em;
top: 4em;
}
#header {
float:left;
width:100%;
height:87px;
}
.wrap {
position:relative;
margin:0 ;
}
ul.navbar {
list-style-type: none;
padding: 0.3em;
margin: 0;
top: 2em;
left: 5em;
width: 15em;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
background: rgb(157,193,255);
margin: 0.5em ;
padding: 0.3em;
border-bottom: 1em solid black;
text-align: center;
display: inline-table;
}
ul.navbar a:hover {
color: blue;
background-color: #00FFFF;
}
ul.navbar a {
text-decoration: none;
}
HTML:
<body>
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div><ul class="navbar">
<p> <li>Home </p>
<p> <li>Services </p>
<p> <li>Training </p>
</ul>
<div id="contentareamain1" no-repeat>
<div id="contentareamain1text"><p>
</p></div>
</div>
Thank you so much in advance!
First you should check your HTML structure – it seems there is a missing closing DIV tag and you should delete the wrapping P elements around the list elements.
Try this:
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div>
<ul class="navbar">
<li>Home</li>
<li>Services</li>
<li>Training</li>
</ul>
</div>
After you just need to give your header image this CSS:
display:block; margin:0 auto; position:relative;
and the ul.navbar needs something like this:
margin:0 auto; float:none; position:relative; top:-35px; width:500px;
and you should delete the relative position of your div#contentareamain1 to get this code work.
div#contentareamain1 { (…) /*position: relative;*/ }
You should really visit W3C and learn your HTML :)
The HTML
<div id="header">
<img src="" />
<ul class="navbar">
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</div>
<div id="content-area>
</div>
Your HTML contains some <p>-tags who don't belong there. Also I guess you would like your content outside of the header?
The CSS
(I only give you an example how to place your navbar centered in your header, the rest is up to you)
#header {
position:relative;
z-index:1;
text-align:center;
}
#header img {
position:inherit;
z-index:inherit;
}
#header ul.navbar {
position:relative;
z-index:2;
margin:0 auto;
top:-35px;
list-style-type:none;
}
#header ul.navbar li {
display:inline-block;
}
#header ul.navbar li a {
display:block;
padding:4px 8px;
background-color:blue;
color:white;
text-decoration:none;
}
You can see the code in action at jsFiddle and play around with it.
Hope it helped you a bit.
Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My HTML:
<!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=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
Why in-line alignment won't work on Opera? It's all straight up.
DEMO: http://jsfiddle.net/KKEKW/
With Firefox or Safari it looks fine just like this. This is how it looks what I want.
With Opera it will be all straight up just like this. I dont want it.
HTML
<div class ="social">
<div class ="row">
<div class="twitter">
twitter content
</div>
<div class="facebook">
facebook content
</div>
</div>
<div class ="row">
<div class="google">
google content
</div>
<div class="instagram">
instagram content
</div>
</div>
</div>
CSS
div.social {
margin-top: 10px;
display: inline-block;
height: 90px;
overflow: hidden;
text-align: left;
vertical-align: bottom;
}
div.row{
}
div.twitter {
float: left;
width: 200px;
height: 30px;
overflow: hidden;
display:inline-block;
}
div.facebook {
float: left;
width: 170px;
height: 30px;
overflow: hidden;
display:inline-block;
}
div.google {
float: left;
width: 200px;
height: 25px;
overflow:hidden;
display:inline-block;
}
div.instrgram {
float: left;
width: 170px;
height: 30px;
overflow: hidden;
display:inline-block;
}
The output that I want
twitter content ewfe(20px margin)facebook conten adhfhefjw
google content ewffewfewfewfew(20px margin)instagram content dwqwqqwfqwe
A styled, unordered list can do this for you.
Give your LI a fixed width, give your UL twice as much. Use float:left on your LI.
<div class ="social">
<ul>
<li>twitter content</li>
<li>facebook content</li>
<li>google content</li>
<li>instagram content</li>
</ul>
</div>
CSS:
social ul, social li {
margin:0;
padding:0;
list-style:none;
}
.social ul {
width:500px;
}
.social li {
width:250px;
float:left;
}