I am trying to create a navigation bar for my website. Beside the cart option, I would like to incorparate a shopping cart image. I am trying to use float:right; and margin to be able to position this element. For some reason, the margin is disregarded and doesn't work. I have looked over countless questions regarding this topic, but none of the answers have been relevant to my problem. Any help is greatly appreciated. Once again, I understand their are many questions regarding my problem, but none of them have resulted in a fix. I have also tried padding, but that didn't work either. Thanks in advance for any help. It is greatly appreciated. Below is my code:
.cart {
clear: both;
margin-left: 975px;
margin-top: -25px;
float: right;
display: block;
overflow: auto;
}
<body>
<nav>
<ul>
<li>Categories</li>
<li>Sale</li>
<li>Contact</li>
<li>Login/Sign Up</li>
<li>Cart</li>
</ul>
</nav>
<img src="shoppingcart.png" class="cart" height=25 width=25>
</body>
When you use float:right, it is logically to use margin-right property because float: right will push the item to the most right and if you want to set some margin between the element and the most right boundary you have to use the margin-right.
The opposite way won't work because you are setting the element to float right, but at the same time you are setting its left margin which will be overriden by the float property.
Also setting the left margin is a hard-coded solution, i.e. you don't know how big margin is required on different screen size. But instead it is most probably that you know how big the margin should be from the right side.
Please take a look at the snippet below.
.cart {
clear: both;
margin-top: -25px;
margin-right: 50px;
float: right;
display: block;
overflow: auto;
}
<nav>
<ul>
<li>Categories</li>
<li>Sale</li>
<li>Contact</li>
<li>Login/Sign Up</li>
<li>Cart</li>
</ul>
</nav>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/28468-200.png" class="cart" height=25 width=25>
Related
This question already has answers here:
Float:right reverses order of spans
(16 answers)
Closed 6 years ago.
So I've run into this problem a few times, how come my navigation menu is reversed?
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
ul {
list-style-type: none;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
When put into action, the menu order is reversed, why is this happening?
You let the elements float to the right. Try to picture that..
The first element enters the document and floats all the way to the right, bumping into the side of the screen. The second enters and floats to the right as well, but bumps into the left side of the first, and stays there. And so on, and so on.
A better solution would be to use display: inline-block for the elements, and float-right for the parent (the ul).
But personally I'm not a big fan of floating at all, so I would use text-align on the ul. text-align keeps it a normal line of text, which can also include images or other inline and inline-block elements. By right-aligning the text, the order of the words is not changed, but any remaining white space is just added to the left instead of to the right of the line:
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
.navigation li {
display: inline-block;
}
.navigation ul {
text-align: right;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li>About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
This is happening because that's how float was designed. It will "float" the elements in the direction specified, in the order specified. If order is important, you can fix this in three ways:
Use the built-in Bootstrap alignment tools.
Apply float: right to the parent <ul> rather than each link.
Reverse the order of the elements.
In this case, you are floating elements to the right, in the order About > Portfolio > Contact. This is what happens:
About is floated right with no previous elements, so it sits against the farthest right wall of the parent container, <ul>.
Portfolio is floated right, but About is there already, so it gets as far right as it can, which puts it to the left of the previous element.
Contact is last to the party, so it ends up at the end of the line, farthest left.
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
I have the code above for a navigation bar in an Udemy tutorial I am following.
The CSS Source Code for the navbar is the following:
.row {
max-width: 1140px;
margin: 0 auto;
}
.logo {
height: 100px;
width: auto;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
The part I am confused on is for the img in the div with the class="row" why is it that the image is put off to the top left even though I didn't set the float property of the img to float: left;.
As you can see in the image below, that white logo is positioned to the top left even though I never set the float property to left. But for the ul with the class="main-nav" I had to set the float property to right.
img is a inline element & ul is a block level element. that means that ul would take the 100% width and be on a new line whereas img would take its specific width. and by default the direction is ltr so we have all inline elements floating to the left.
The logo displays on the left side as the default direction for every HTML element has the "rule" LTR, so that means even if you haven't made a float: left line it will, though display at the left side.
Have a look at this, it should help you with something, happy programming!
I've followed various tutorials over the last few days and am having difficulties with the (sticky) header overlapping the content below it when my page is scrolled vertically.
It's on all pages of this test site.
HTML >
<header>
<div id="nav">
<ul>
<li>Home</li>
<li>Collection</li>
<li>Shop</li>
<li>FAQ/Policies</li>
<li>Contact</li>
</ul>
</li>
</ul>
<br class="clearboth"/>
</div>
</header>
<br>
<div class="table">
CSS >
header {
margin-left: auto;
margin-right: auto;
text-align: center;
position: fixed;
z-index: 10;
}
.table {
margin-left: 75px;
text-decoration: none;
margin-top:300px;
}
Actually you were almost there with your code as it was. You simply need to give the header a background colour, as that is transparent by default, and also give a width of 100%. Then the scrolling content will disappear up behind it.
Also best to tidy it up by setting the body margin and padding to zero. So add this to your CSS:
body{
margin: 0;
padding: 0;
}
header {
background: white;
width: 100%;
}
That will achieve what you want initially. Now, however, comes the interesting bit that most people omit. I'm not quite sure why you have given the table div a margin of 300px, as that is much larger than you need. But do not set this in pixels at all! Because using fixed measurement means that as soon as a partially sighted user running with text-only zoom (a lot depends on their browser) sees the page, the header will overlap the content, hiding it, so undoing all your hard work! Use em units.
The menu in your example has 5 lines, plus there is a blank line above and two or three more below, so allow 9em in all for the header (you choose the value according to how high your final header actually is), and do this:
.table {
margin-top: 9em; /* instead of 300px */
}
Now, whatever text zoom the user is using, your content's top margin will grow accordingly, and the content will always start just below the header.
Add below css into your top header class:
z-index: 99;
As:
<header style="z-index:99">
<div id="nav">
<ul>
<li>Home</li>
<li>Collection</li>
<li>Shop</li>
<li>FAQ/Policies</li>
<li>Contact</li>
</ul>
</li>
</ul>
<br class="clearboth"/>
</div>
</header>
I'm trying to vertically align a logo and UL within a navigation bar. I've got pretty close and it looks fine really, however there is some extra space underneath and above them both that I can't account for. I've set the padding on the links and logo to allow the user to be able to click them more easily.
Place the mouse underneath the logo and underneath the nav bar, I've tried to do it so that as soon as your mouse reaches the nav bar, it hits the padding of the logo and therefore the mouse cursor turns to pointer. However, there is a gap there...using the developer tools, I can see that it's the div.inner element...but it says it has a margin. I've tried setting the margin to 0 on that div and it doesn't go away.
Here is the jsfiddle example: http://jsfiddle.net/Forresty/0smpmsqn/2/
I'm using the same vertical alignment method as here: http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114
Here is the HTML:
<nav>
<div class="outer">
<div class="inner">
<div class="logo1">LOGO</div>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Any help would be greatly appreciated. Or even if it's not possible to get rid of that extra space, an explanation of why it's there would be great.
Thanks in advance.
Remove
Display: table-cell;
To align in the middle use
line-height | Margin | Padding
The display table cell add's the space
You can change the following:
.outer {
display: table;
width: 100%;
height: 100%;
padding: 0;/*set padding to 0*/
}
.logo1 {
display: inline-block;
font-family: dan_custom-font;
font-size: 2em;
float: left;
margin: 0.3em;/*replace padding with margin*/
margin-left: 0.7em;/*set a bit more margin left*/
cursor: pointer;
color: #de1b1b;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s;
}
fiddle
You can set .outer class padding: 0 and replace margin with padding in .logo1.
You have many options.
Adjust the height of the nav so that it fit the logo and ul.
Adjust the padding of the logo and ul so that it fits the nav.
To see whether they fit, first set a background color for logo and the ul and check.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Have an image floated to the left and two unordered lists floated to the right. For some reason the lists float side by side and not on top of each other. I can't get list-2 to float underneath float 1.
Would anybody have any ideas?
<div class="container">
<img src="yogapic1.png"/>
<ul class="list-1">
<li>Home</li>
<li>Influences</li>
<li>About Me</li>
<li>Classes</li>
<li>Andrews Video Blog</li>
<li>Photography</li>
</ul>
<ul class-"list-2">
<li>Find Us</li>
<li>Contact</li>
<li>Facebook</li>
</ul>
</div><!--container-->
.container {
max-width: 1075px;
margin: auto;
}
.container img {
float: left;
}
.list-1 {
float: right;
}
.list-2 {
float: right;
}
.list-2 {
float: right;
clear: right;
}
float: right will, if there's enough room, put the element to the left of any other elements which have been floated to the right. To override that behaviour and guarantee that it will fall below the most recent float:right element you need to use clear:right.
You've got a typo on list 2 (- instead of =). If you also add clear:right; to the lists it should do what you want:
Example: http://jsfiddle.net/nkYun/
Wrap the two lists in a single div element and float that to the right instead.
By floating the two lists individually, you are taking them out of the normal flow of the document, so they no longer force elements to appear below them.
To float two lists on top of each other you simple need 3 steps:
The container should have position as relative position:relative
One of the 2 lists should be float for example to the right float:right
The second list should have position absolute position:absolute and the right of it is 0px so that it start from the right and be on the first list
Here is an alternative approach. Sometimes trying to figure out what should be floated left, or what should be floated right can be confusing in code. But if you have a general idea of what elements you want to be floated, (and perhaps later on you will decide to add more to that section), then contain the items within a parent container (in our case a div element with a css class called lists) and float the entire parent where you want to be. Here's an example...
The CSS:
.container {
max-width: 1075px;
margin: auto;
}
.container img {
float: left;
}
.lists {
float: right;
border:solid 1px pink;
}
The HTML:
<div class="container">
<img src="yogapic1.png"/>
<div class="lists">
<ul class="list-1">
<li>Home</li>
<li>Influences</li>
<li>About Me</li>
<li>Classes</li>
<li>Andrews Video Blog</li>
<li>Photography</li>
</ul>
<ul class-"list-2">
<li>Find Us</li>
<li>Contact</li>
<li>Facebook</li>
</ul>
</div>
</div><!--container-->
And my fiddle
Notice too with this approach, you are no longer leaving the headache of ordering your lists with floats, but now, within this parent container, you can simply go into your HTML code and sore the lists, in any order you want them to be.
Enjoy!
Try to assign width to your list:
.list-1 {
float: right;
width:100%;
}
.list-2 {
float: right;
width:100%;
}
Edit
If you are giving same CSS to both lists, try something like this
.container ul{
float:left;
width:100%;
}
If you float list-2 to the right and clear: right too that should work. Like:
list-2 {
float: right;
clear: right;
}