My markup looks like this:
<div class="header-section">
<img src="logo.png" />
<div class="navigation">
<ul>
<li>Home</li>
<li><a href=#>Bakery</a></li>
<li><a href=#>Fishery</a></li>
<li><a href=#>Casino</a></li>
<li><a href=#>Disney Land</a></li>
</ul>
</div>
<div style="clear:both" />
</div>
and the css that matters is:
.header-section {
margin: 30px 0;
}
.header-section .logo {
float: left;
}
.header-section .logo img{
border: 0;
}
.header-section .navigation {
float: right;
margin-top: 23px;
}
.header-section .navigation ul {
list-style: none;
}
.header-section .navigation ul li{
font-size: 18px;
font-family: Tahoma, Arial, Verdana;
float: left;
margin: 0 20px;
}
So the links are formatted in a horizontal line to the right of the logo.
Initially I had the idea to have them just wrap when the screen real estate did not allow them to be in one line but then what actually happened was that before wrapping, they fell below the logo. I was happy with this until I saw that - ironically - IE rendered it the way I had in mind.
So my question is - how do I get the links to wrap before just snapping below the logo image?
make tag as a block element:
and add width & height..
.header-section a {
display:block;
width:100px;
height:100px;
}
Try putting <img src="logo.png" /> after navigation div end and fix width of both section... It should work
Related
I have a list with images in. The list is a centered column in foundation.
Fiddle
I need it so that the list elements images are all aligned in the same 'row' rather than going down the page.
How can I do this? I've tried:
li{
display: inline;
}
But no luck.
Add display: inline-flex to your ul
ul {
list-style: none;
display: inline-flex;
}
img {
border: 1px solid black;
}
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
</ul>
</div>
You can give the ul and li a fixed size or % based width and use for lists a display:inline-block
#myUL{
list-style: none;
width: 100%;
position: relative;
display:block;
float:none;
padding: 0;
margin: 0;
}
li{
width: 32.5%;
position: relative;
margin: 0px;
line-height: 14px;
display: inline-block;
}
}
img{
border: 1px solid black;
position:relative;
width:100%;
}
Jsfiddle
Firstly - you need to remove "li" css being nested inside ul.
Then, having li width set to some certain size, and adding display: inline-block; to li's css should do the job.
It has greater universal browser support in opposition to inline-flex (if you're about to have a support for IE9 and below):
HTML:
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
</ul>
</div>
CSS:
ul {
list-style: none;
}
li {
display: inline-block;
width:30%;
margin-right: -4px;
}
img {
border: 1px solid black;
}
JSFiddle
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul id="navigation">
<li id="nav_home">Home</li>
<li id="nav_gallery">Gallery</li>
<li id="nav_shows">Shows</li>
<li id="nav_contact us">Contact us</li>
</ul>
</div>
</div>
<div id="container2">
<div id="background">
</div>
</div>
</body>
Css :
#nav{
text-align: right;
margin-top: none;
}
#navigation{
list-style: none;
display: inline-block;
margin-left: 10px;
font-size: 17px;
font-family: monospace;
float: right;
position: relative;
}
I can not figure out why it is not working. When I try closing the div header tag after the list (bar) it appears above the logo image. And it is currently like this:
EDIT: How to specify a style for this exact line? I tried anything but i couldn't, due to the fact that with DIV it gets under the whole Anime of the week - http://gyazo.com/5c9c6b57cd7097edc719b09a8bbfdd1d
Try this and then arrange the padding as per required :-
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
Make necessary changes to replicate the block of CSS code below:
#nav {
margin-top: none;
width: 500px; /* Define a width for the parent cont*/
}
#navigation {
width: 100%; /* Adjsut as needed */
}
#navigation li {
display: inline-block;
list-style: none;
padding: 15px;
}
See working example here
Important: If the logo and the nav are both inside one container, find out what's left of the container after the width of the logo and use it as the with of the nav.
How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:
<body>
<div id="header">
<h1 style="color: #CC6600; height: 100px; width: auto;">
Dial food</h1>
</div>
<div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
word-spacing: 24px; position:absolute">
About
Restaurants
Contact
Support
</div>
</body>
can you please help me in getting this alignment and link text only get aligned?
Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)
<h1 style="color: #CC6600; height: 15px; width: auto;">
And use the following CSS to remove the underline.
#Menu a {
text-decoration:none;
}
http://jsfiddle.net/6bxVr/
HTML
Dial food
<ul>
<li> About </li>
<li>Restaurants </li>
<li>Contact </li>
<li>Support </li>
</ul>
CSS
.header
{
color: #CC6600;
height:20px;
width: auto;
margin:10px;
}
ul
{
list-style:none;
}
ul li
{
float:left;
padding:10px;
background-color: #330000;
word-spacing: 24px;
font-size: 20px;
height: 25px;
width:auto;
}
li a
{
text-decoration:none;
}
Fiddle Demo Here
Update fiddle of Yours
Hope this helps
happy coding..!!
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.