I have a working navbar in the top center of my page. However, when I reduce my resolution, my navbar spreads itself into separate lines. How can I force it to stay in one line?
Here's my css:
#navbar {
display:inline-block;
width:100%;
position:absolute;
margin-left:25%;
margin-top:30px;
}
.navbar-li {
display:inline-block;
white-space:nowrap;
background-color:orange;
font-family:Arial;
margin-right:100px;
padding:20px 40px;
}
li {
font-size:20px;
}
HTML:
<div id="navbar">
<ul>
<li class="navbar-li">text1</li>
<li class="navbar-li">text2</li>
<li class="navbar-li">text3</li>
</ul>
</div>
Add white-space: nowrap; to your navbar
Set width: to the amount in pixels that you want your nav bar to always be, do not use a percent. This makes it stay the same size no matter what the screen resolution is.
Related
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.
I need to center align the yellow boxes (no matter how many are they) inside the blue container. The yellow boxes can go down on the 2nd (or 3rd row, etc) if they are many but they should remain center aligned inside the blue container. Any ideas how to do it?
HTML
<div id="container">test
<br />
<div class="box">foo bar</div>
<div class="box">foo bar</div>
<div class="box">foo bar</div>
<div class="box">foo bar</div>
</div>
CSS
#container {
background:lightblue;
width:100%;
}
.box {
width:10em;
float:left;
background:yellow;
margin:1em;
}
http://jsfiddle.net/585Eq/
Remove the float on the divs and replace it with display:inline-block. Add a text-align:center rule to the container div:
#container {
background:lightblue;
width:100%;
text-align:center;
}
.box {
width:10em;
display:inline-block;
background:yellow;
margin:1em;
}
jsFiddle example
Change your css to following:
#container { background:lightblue; width:100%;text-align:center }
.box { width:10em; display:inline-block; background:yellow; }
I dont know if you use auto margin will work.. but i recommend you to deal with it as a menu. It will work just like a div. Im showing you this way because thats the way im sure it works.
<ul id="container">test
<br />
<li class="box">foo bar</li>
<li class="box">foo bar</li>
<li class="box">foo bar</li>
<li class="box">foo bar</li>
</ul>
the CSS:
#container {
text-align: center;
height: <-- Specify a fixed height.
}
#container li {
display: inline-block;
margin-right: 30px; <-- This will the the margin between the items
list-style-type: none;
}
Thats what you want? Or you want that all the yellow boxes be automatically adjusted inside the blue div?
You may try with display:inline-block;
Change your CSS like:-
#container {background:lightblue;width:100%; text-align:center;}
.box {width:10em; display:inline-block; background:yellow; margin:1em;
}
DEMO JSFIDDLE
I have custom slider sitting at the top of my page but I'm having some issues. I would like the list items to stretch to the width of the screen but I'm having issues forcing this because the list items display below one another. I have set them to float and I have a div surrounding the list with an overflow hidden but to no avail.
I want it so that the current slide is the width of the screen regardless of size, possibly with a min width of 960px
HTML
<div id="slider">
<div class="slides">
<ul>
<li class="slide">
one
</li>
<li class="slide">
two
</li>
<li class="slide">
three
</li>
</ul>
</div>
</div>
CSS
#slider {
position:relative;
margin:0 auto;
top:85px;
width:100% !important;
}
.slides {
margin:0 auto;
overflow:hidden;
text-align:center;
position:relative;
left:0;
}
.slide {
height:630px;
width:100%;
float:left;
position:relative;
}
Try this...
Add a css class like following.
.ul_class {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
After that, assign this new class (ul_class) to your <ul> like this.
<ul class="ul_class">
...
...
...
</ul>
Hope this will help you.
JSFIDDLE
HTML:
<div class="SummaryTable">
<div class="AddressContainer">
<div class="Address">
<b>Ship To: </b>
<ul>
<li>John Smith</li>
<li>45 Holland drv.</li>
</ul>
</div>
<div class="Address">
<b>Bill To: </b>
<ul>
<li>John Smith</li>
<li>P.O Box 456</li>
</ul>
</div>
</div>
</div>
CSS:
.SummaryTable
{
width: 650px;
text-align:center;
}
.SummaryTable .AddressContainer
{
width:650px;
}
.SummaryTable .Address
{
width:323px;
background-color:Yellow;
float:left;
border: 1px solid black;
height:200px;
}
.Address ul
{
width:130px;
min-width:130px;
max-width: 280px;
margin-left:auto;
margin-right:auto;
background-color:Green;
text-align:left;
padding:0px;
}
.Address li
{
list-style-type: none;
}
JSFIDDLE
I want to keep the green box\element (ul) centred in the 323px wide/200px or Auto high (.Address) layer both horizontally and vertically.
I have achieved horizontal centering of <ul> by setting fixed width + margin:0px auto, but addresses vary in length and I don't just want some fixed size box where one longer address would appear centred under (Ship To\Bill To) heading and another shorter one will look out of place since text is aligned to the left.
I want to see the text in the <li> stretch to the <ul> green box up to the maximum-width setting (e.g 280px) and the green box, whatever its size will be to remain centered horizontally and vertically in the .Address layer and consequently under the Ship To\Bill To headings.
Main reason for this is that shorter addresses would look offset to the left in a fixed width ul element and if I make the width small than a line break would ensue for longer address, spreading the first and last name and or address over two lines. Using centrally aligned text in the ul element
-Of course solves this problem, but I need left aligned text.
DEMO jsBin
If I understood well your question
Here is the modified CSS:
.SummaryTable{
width: 650px;
text-align:center;
}
.AddressContainer{
width:650px;
}
.Address{
width:323px;
background-color:white;
float:left;
border: 1px solid black;
height:200px;
}
.address b{
display:block; /*should do the trick*/
}
.Address ul{
display:inline-block; /*should do the trick*/
background-color:orange;
text-align:left;
padding:0px;
}
.Address li{
list-style-type: none;
}
I removed some margin-reft/right:auto, widths, min-width, max width and formatted a bit your .summaryTable css 'appearances'. Than a bit of playing with display property have done the trick.
Here is a demo using jQuery : demo jsBin with jQ
I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook.
Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar.
This should get you started
<div class="menuBar">
<img class="logo" src="logo.jpg"/>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
body{
margin-top:50px;}
.menuBar{
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
}
.logo{
float:left;
}
.nav{
float:right;
margin-right:10px;}
.nav ul li{
list-style:none;
float:left;
}
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
to set a div at position fixed you can use
position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
The postition:absolute; tag positions the element relative to it's immediate parent.
I noticed that even in the examples, there isn't room for scrolling, and when i tried it out, it didn't work.
Therefore, to pull off the facebook floating menu, the position:fixed; tag should be used instead. It displaces/keeps the element at the given/specified location, and the rest of the page can scroll smoothly - even with the responsive ones.
Please see CSS postion attribute documentation when you can :)