<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!
Related
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>
I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
I'm a novice, trying to create my own website. I have a menubar on top of the page, and I'd like the menu items to be centered instead of left-justified. Please note: I'm trying to center 2 things. First is the text within the menu item, and the second is the entire group of menu items.
The link is located here:
http://www.martyversusaig.com
My menu-bar code is here:
<ul id="nav">
<li id="nav-home">Home</li>
<li id="nav-about">Your Story</li>
<li id="nav-archive">Florida Law</li>
<li id="nav-lab">Lab</li>
<li id="nav-reviews">Reviews</li>
<li id="nav-contact">Contact</li>
</ul>
I've tried entering 'center' html tags, but it doesn't center anything and really fouls up the menu.
Any help is greatly apprecaited!
Thanks,
Marty
I've made a fiddle of your nav bar so you can see how it would work. You can access it here: http://jsfiddle.net/BQj3P/
To center the #nav element, the easiest thing to do is to wrap it in a div. Creat a #nav-wrapper element and style it in the same way as you had previously styled #nav:
#nav-wrapper {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #42432d;
text-align: center;
}
You'll notice one important difference: text-align: center. This will help you center the #nav ul.
The #nav itself is now styled like this:
#nav {
margin: 0;
padding: 0;
display: inline-block;
}
The display: inline-block was the final piece you needed to center the entire set of navigation buttons.
To center the text inside the buttons themselves, your original code had this line to style the #nav list items: padding:20px 40px 4px 10px;
In other words, the right padding was set to 40px and the left was set to 10px. Simply changing the line to padding:20px 20px 4px 20px; will center your text.
Check out the fiddle for more details.
It helps to use css. I have a separate style sheet.
You will want to nest so that the outside one centers all elements inside of it and then internal menu items have a specific width, so they don't end up all together.
<div class="centre">
<div class="block">
<li id="nav-home">Home</li>
</div>
<div class="block">
<li id="nav-about">Your Story</li>
</div>
MY CSS:
.centre
{
text-align: center;
margin: 0 auto;
}
.block {
width: 100px;
display:inline-block;
}
I'm trying to make a nav bar out of a un-ordered list. This list needs to be vertical and pulled to the left side. What I have now makes a vertical list all the way to the left, but it is on top of my content instead of to the left of it.
<ul id='help_links'>
<li>Announcements</li>
<li>Approvals</li>
#...
</ul>
<div id='content' style='margin:20px auto;'>
<a name="annoucements"><h2>Announcements</h2></a>
<h3>Creating Annoucements</h3>
<ul style="list-style-type:circle;">
<li>...</li>
#...
</div>
#help_links ul
{
margin:0;
padding:0;
}
#help_links li{
display:block;
}
What do I need to change to get the content in the middle and have the help_links be listed to the left side.
Put the list in a div, let's call its class a divlink and add this to your css:
div.divlink
{
float: left;
height: 100%;
}
div.content
{
float: left;
height: 100%;
}
Oh and also after doing this, you should use padding instead of margin in your content div. From my experience, margins work weird with float.
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;
}