I am attempting to make a simple navigation bar using 4 images, wrapped inside an unordered list.
I am having issues, because the bar is not lining up, it is acting as if the parent div it is nested within has a padding-left assigned to it and pushing the unordered list to the right. Here's a picture of what is happening:
I have a border on the main navigation div to see what is going on.
Here is my code:
<div id="container">
<div id="header">
<h1 class="hidden">Blue Ridge Fencing</h1>
</div>
<div id="navigation">
<ul>
<li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
<li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
<li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
<li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50" alt="Quote" border="0"></li>
</ul>
</div>
<div id="content">
</div>
</div>
And the CSS:
#navigation {
height: 50px;
width: 1000px;
background-image: url(../images/backgrounds/otis_redding.png);
overflow: hidden;
padding: 0px;
border: 1px solid #000;
}
#container #navigation ul {
margin: 0px;
list-style-type: none;
font-size: 34px;
}
#container #navigation li {
float: left;
}
Thank you in advance!
<ul> elements generally have default padding set by the browser (or one of your stylesheets). Just remove it:
#navigation ul {
padding:0;
}
You might want to look into using a CSS reset if you haven't already:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Why is there the need for browser resets?
You need to remove the padding from the ul element. You can do by adding padding: 0; to #container #navigation ul in your css.
Related
So I'm making a little website to market an application I'm going to create. I'd like to have three social media icons at the bottom of the screen, aligned to the middle of the screen, horizontally.
I've put the three icons inside a div and no matter how much I try, I can't figure out how to align this properly!
Please note, I began using HTML and CSS today, so excuse my extremely horrible code.
<div style="text-align:middle">
<ul style="white-space:nowrap; display:inline; list-style:none;">
<li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
<img src="images/custom/facebook.png" height="60"></img></li>
<li style="white-space:nowrap; display:inline; list-style:none; text-align:center;">
<img src="images/custom/twitter.png" height="60"></img></li>
<li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
<img src="images/custom/gmail.png" height="60"></img></li>
</ul>
</div>
Any help is appreciated.
Thank you,
David
You need to use text-align:center:
<div style="text-align:center">
<ul style="white-space:nowrap; display:inline; list-style:none;">
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="http://placehold.it/60" height="60" /></li>
<li style="white-space:nowrap; display:inline; list-style:none; text-
align:center;">
<img src="http://placehold.it/60" height="60" /></li>
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="http://placehold.it/60" height="60" /></li>
</ul>
</div>
I would use flex boxes to center your div. It's a more modern solution that also scales nicely if you want to play around with your flex-items.
<div style="display: flex; justify-content: center;">
<ul style="white-space:nowrap; display:inline; list-style:none;">
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="images/custom/facebook.png" height="60"></li>
<li style="white-space:nowrap; display:inline; list-style:none; text-
align:center;">
<img src="images/custom/twitter.png" height="60"></li>
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="images/custom/gmail.png" height="60"></li>
</ul>
</div>
You can learn more about flex boxes here. Alternatively if you're more of a gamer there's an interactive tutorial here.
First, separate your html and css. Second, I doubt that you need the ul and li's. Here's the html:
<div class="social">
<img src="images/custom/facebook.png" class="social-icon">
<img src="images/custom/twitter.png" class="social-icon">
<img src="images/custom/gmail.png" class="social-icon">
</div>
Then, the css:
.social {
text-align: center; //not middle
}
.social-icon {
height: 60px;
padding: 20px; // your choice here
float: left;
}
Even better would be to use the flex property in css:
.social {
display: flex;
padding: 10px; // your choice here
}
.social-icon {
flex: 1 0 30%; // experiment with the last value
padding: 20px; // your choice here as well
}
You can do it with the Flexbox:
* {margin: 0; padding: 0; box-sizing: border-box}
ul {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
background: Lavender;
}
ul, li {
white-space: nowrap;
}
ul li {
list-style: none;
padding: 30px;
}
img {
height: 60px;
}
<div>
<ul>
<li>
<img src="http://placehold.it/60x60" alt="">
</li>
<li>
<img src="http://placehold.it/60x60" alt="">
</li>
<li>
<img src="http://placehold.it/60x60" alt="">
</li>
</ul>
</div>
I'm trying to add a site banner above the menu on my site using a simple img tag but whenever I do so the menu just overlaps the image. What I want to achieve is the menu to be pushed down by the image above it so it appears right under it.
HTML:
<header>
<img src="site_logo.jpg" alt="">
<img src="banner_small.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
My first img is for the site logo and the second one is in the menu. I want to position the first img to be on top of the site and push the menu down
CSS:
header {
height: 50px;
background: #333333;
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
Try to put the images inside div elements:
<div id='x'><img src="site_logo.jpg" alt=""></div>
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>
Then if you want to increse ou decrease the space between elements use the Margin property:
x{margin-bottom:...px;}
y{margin-top:...px; margin-bottom:..px;}
My image won't be positioned next to the slider.. instead it's just stacked underneath it. It's like there isnt room for the image because the slider takes up too much space, however it doesnt seem like that is the case when I look at the code, unless I missed something :)
This is my HTML:
<div id="content">
<div class="bx.wrapper">
<ul class="bxslider">
<li><img class="photo" src="IMG/pic_0001.jpg"></li>
<li><img class="photo" src="IMG/pic_0012.jpg"></li>
</ul>
</div>
<div id="hours">
<img src="IMG/hoursdk.png"/></div>
</div>
And my CSS:
#hours{
position:relative;
right:150px;
width:20%;
height:10%;
}
.bx-wrapper {
position: relative;
width:100%;
margin-left:-30px;
}
ul.bxslider {
margin-top: 60px;
padding: 0;
}
.bx-wrapper img {
min-width:30%;
max-width: 40%;
display: block;
}
I got the CSS from the BXslider, and I removed some unnecessary things, such as controls and pager, already.
Do you mean something like this? Check here
<div id="content">
<div class="bx-wrapper">
<ul class="bxslider">
<li><img class="photo" src="http://placehold.it/350x150"></li>
<li><img class="photo" src="http://placehold.it/350x150"></li>
</ul>
</div>
<div id="hours">
<img src="http://placehold.it/350x150"/></div>
</div>
CSS
.bx-wrapper, #hours{
display:inline-block;
}
.bx-wrapper{
float:left;
}
#hours{
float:right;
}
.bxslider{
list-style: none;
}
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
I am new to html,css and am currently working on a page.
I am unable to align the menu at the right bottom side.It is clashing with my 3 pictures in the middle. Also logo at the bottom left keeps changing when ever I make changes to the images at the centre. Kindly go through the code and let me know.
body {
margin: 0;
padding: 0;
}
.background{
position: relative;
}
.background .text {
position: absolute;
top: 300px;
left: 300px;
width: 300px;
}
.logo {
position:absolute;
left: 10px;
bottom: 10px;
}
#bottomnav ul {
list-style: none;
display: inline-block;
width: 100%;
position: absolute;
right:0px;
bottom:0px;
}
#bottomnav ul li {
width: 0%;
float: right ;
text-align:right;
}
.images{
width:250;
height:250;
display:inline;
float:right;
border:2px solid #FFF;
margin-top:300px;
}
<body>
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div class="images">
<img src="images/top1.jpg" width="400" style="float:right"/>
<img src="images/top2.jpg"width="400" style="float:right"/>
<img src="images/top3.jpg" width="400" style="float:right"/>
</div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
Divi,
check out clearfix.
http://nicolasgallagher.com/micro-clearfix-hack/
You will need to apply the fix to the image parent container (.images).
Also you are using a lot of absolute positing, when it is not necessarily needed.
You could float the logo left and image container right, while applying an explicit width to each.
Also why do you have .images set to 250 width, and images are 400 width?
I am unsure if this is the answer you're looking for, but this solution solves the problem you were having regarding the menu not showing up on the bottom right hand side (I think is what you were trying to achieve with some of your css): http://jsfiddle.net/swm53ran/72/
I reorganized the structure of your html a little bit because you said the logo should be at the bottom (I'm assuming below the other larger pictures).
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="images">
<img src="images/top1.jpg" width="400" style="display:inline-block;"/>
<img src="images/top2.jpg"width="400" style="display:inline-block;"/>
<img src="images/top3.jpg" width="400" style="display:inline-block;"/>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
heres the css:
#bottomnav {
display:inline-block;
float:right;
}
#bottomnav ul {
list-style: none;
}
#bottomnav ul li {
display: inline-block;
}
Useful tip: when dealing with css, less is more, try to be concise in your styles so that you dont have to write over styles with other styles and force your way around the DOM.
hope this helps/gets you pointed in the right direction.