I've been teaching myself CSS, and decided to try and make a site with the knowledge I have thus far. So I decided to make a fixed navigation bar that follows the position of the web browser, and I ran into an issue. For whatever reason, one of the links I added isn't staying inside the nav bar when I change the browser window size. Can someone look at my code? Please ignore sloppiness, as I'm just trying this for the first time.
Here's my HTML. The "secondnavlinks" div id is the one that won't stay within the nav bar:
<div id="nav">
<div id="secondnavlinks">
<ul>
<li>Ambient Bookmarklet</li>
</ul>
</div>
<div id="class1">
<ul>
<li>Saved</li>
<li>Folders</li>
</ul>
</div>
<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>
</div>
And here's the CSS:
#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}
(Skipped over the "class1" div)
#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}
#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}
#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}
At first this seemed like it may be the positioning inside of the fixed element. After looking into this a little bit, I think I've found the culprit... It seems like your problem is the 'left: 950px;' - This value won't be browser independant and will vary the results / pop out the element with certain widths.
Like Libin mentioned, you want to be looking into Fluid Layout design using relational values instead of fixed values. So when you rescale your browser everything is set correctly.
Start looking into Media Queries & the use of relational values such as % and Ems.
Here's a useful resource for converting px values to ems etc: http://pxtoem.com/
Also if you want to go through tutorials / courses on the subject, I've included a couple of links below that have helped me in the past:
http://www.codeschool.com/courses/journey-into-mobile ( Check out the free first lesson )
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
http://www.css-tricks.com/css-media-queries/
Also, - Here's the proof that using absolute & relative won't pop normally inside the fixed nav bar: http://jsfiddle.net/JQT7u/2/
Good Luck!
If you are trying to make a fixed navigation bar that follows the position of the web browser, you should use % values instead of px values.
Check this demo
In that demo, I had changed the values to %, removed some position absolute etc.
Hope this is what you are trying.
check this link
Do you want like this?
It is not clear from your question how the design should be.
BTW, the links were coming out because you were giving the inside div's position:absolute. So the links were losing relation with the main div Nav.
If you want to know more about working of positioning in CSS then go through this link.
Related
I've looked at and tried a few of the existing solutions on the site (for example CSS Problem to make 2 divs float side by side and CSS layout - Aligning two divs side by side) but none of them work for me.
I'm a bit of a newb to CSS but I'm trying to align the title and menu on my WordPress site http://photography.stuartbrown.name/ in a similar way to http://www.kantryla.net/. Whenever I float:right on the menu area however the menu disappears below the image and a float:left on the menu it pushes the image way out to the right.
I know that in order to achieve what I want I will need to reduce the size of the site title and reduce the width of the menu (perhaps by reducing the gaps between the items in the list?), but I'd really appreciate some advice on how to achieve the title and menu layout of kantryla.
You may notice that I edited the PHP of the theme to include a DIV
<div class="stuart_menu">
that surrounds both the title and menu thinking that this wold make the enclosed items easier to control. Nt sure if that's right or not but I can easily remove if necessary.
Thanks for any help!
Place these styles in your CSS
#logo {
float: left;
margin: 0 0 25px;
position: relative;
width: 20%;
}
#logo h1 {
color: #555555;
display: inline-block;
font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
font-size: 25px;
font-weight: 200;
margin-bottom: 0.2em;
}
#menu {
float: left;
width: 80%;
}
.stuart_menu {
overflow:auto;
}
I guess thats it.
The menu is kinda messed up, I can't make any sense out of it with all the (unneeded) elements, classes.
But basicly you're on the right way, you'll need to redruce the size of both main elements (logo and menu) so it fits inside the parent div.
For instance, like this:
HTML
<div class="stuart_menu">
<div class="logo">logo</div>
<ul class="nav">
<li>Home</li>
<li>Blog</li>
<li>Photos</li>
<li>Delicious</li>
<li>Twitter</li>
<li>Google+</li>
<li>FOAF Description</li>
</ul>
</div>
CSS:
.stuart_menu {
width: 600px;
}
.logo {
width: 150px;
background: red;
float: left;
}
.nav {
list-style: none;
margin: 0;
padding: 10px 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
float: left;
}
.nav li {
display: inline-block;
}
Also check this demo.
You can choose if you want to align the menu next to the logo (using float: left) or align it to the right side of the parent (changing the float to right).
Any kind of solution you can try could lead to modify the look & feel of your site.
Maybe you can try to achieve this by reducing the width of the elements and make it float on left.
BTW, this would mess up the entire design of the site, because the "menu" section is inserted into the main container element. So I'd rather separate the two section.
what I'd do is:
#logo{ width:60%;float:left;}
nav {width:35%;float:left;}
to reduce the gap between the nav li elements you can reduce the padding and to make it more recognizable, add a border-right
#menu ul li{margin:22px 15px; border-right:1px solid #ccc;}
Hope this works
Just changing the #logo to include float: left; should put the menu up with the logo. It will be to the right of it. Its just a matter of then down sizing both the logo and menu to fit within the container. Also the other answer should also work.
Been trying to work this out for a few hours now to no avail....I really want a bullet list that will work responsively (al browser width) that looks like this...
Basically the whole thing needs to center, you can center text but not the span with the bullet image :-(
I would obviously 'like' to use a UL/LI. But even without doing it I just cannout fathom how to do it. I haven't even addressed the novices/entrepreneurs bit at the end, assume I can overlay an image? Anyway any advice appreciated. I really need it to scale down for a responsive design too if possible...
EDIT :
I have tried I tried floating, in-lining, offsetting, using a grid system, nothing.... :-(
EDIT 2:
At the request of nathan I will post one of my solutions...
<div class="section group">
<div class="col span_1_of_2">
<p style="float:right;" class="darkGrey">
<span class="sprite step2"></span>
</p>
</div>
<div class="col span_1_of_2">
<h3 class="darkGrey">We then seek to place the you in our network of organizations who actively recruit developers.</h3>
</div>
</div>
^ the above just shoves my tick all the way to the right.....
EDIT 3
I just tried this using an image http://jsfiddle.net/fSSeK/ and it worked however my bullet point is a sprite background image and it doesnt work!
The exact technique is dependent on exactly what kind of bullet you want to show, but for classic bullets here is an easy way to do it.
You need to remove the bullet from the browser's built-in styles with list-style-type: none, then center the text in the list elements horizontally and use the :before pseudo-element to insert a bullet before their content. This bullet will be centered.
Sample CSS:
ul {
list-style-type: none;
}
li {
text-align: center;
}
li:before {
content: "• "
}
See it in action.
Use pseudo-element with background image
For a typical list:
<ul>
<li>The first line</li>
<li>The Second line which is longer</li>
</ul>
and use the following CSS:
ul {
text-align: center;
}
ul li {
border: 1px dotted blue;
display: block;
position: relative;
}
ul li:before {
content: "";
background: url(http://placehold.it/20x20) left top no-repeat;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
See fiddle demo: http://jsfiddle.net/audetwebdesign/S2Mvn/
You can use absolute or relative positioning on the li:before element if you need more precise alignment.
I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make this job is border-spacing but it is a little limited comparing with margin and padding. It have only two ways of styling, horizontal and vertical. You can't set the value of the side you want like border-spacing-left or border-spacing: 0 1px 2px 3px.
In my case, I have a table with one row that lies on the top right corner of the screen. I want it attached on the very top and spaced horizontally, which caused me problems. The top is okay but the right detaches from the border when I use border-spacing: 10px 0.
Smart guys like me don't see this as a problem, cause we can set it margin-right negatively, making it be attached again on the right side of the browser. Wow, whata smart ass I am!
However, I saw an little damn scrollbar on the bottom of the screen like a roach under your cooker at the kitchen. I hate roac.. scrollbars specially horizontals, so I got my inseticide called overflow-x and kil.. set it to hidden. She run desperately and dissapeared, but I know that she's there, somewhere staring at me. And this is driving me crazy.
Seriously now. I think this isn't the right way to do that and I hope somebody can teach me how to do it.
This is my scenario on Fiddle
Thank you in advance(mainly for reading this crap).
There are a few ways of achieving what you're trying to achieve. Most commonly, using display: table, display: table-cell, etc isn't very high on the list.
So, here's how I would do it: http://jsfiddle.net/VKnQZ/1/
Do bear in mind that I don't know the full circumstance of what you're attempting so it may well be that I'm missing a (valid) reason that you're using table display properties in the first place.
You'll notice a few things here:
I've done away with your table display properties. I don't think you need them, and floats do the job just fine (just remember to clear them).
I've removed your display from the cell divs. As someone in the comments above pointed out, divs inherit display: block by default. The additional dimensions set their size as you already had it.
I'm using the + selector to put in the spacing between elements. In this instance div + div is essentially short-hand for 'every div which is beside another div' - so all of them aside from the first.
Hopefully that achieves what you're aiming for and does away with all the nasty hacky overflow/margins/etc.
Here's the code:
HTML (only change is to remove the row div):
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
#nav {
float: right;
}
#nav div {
float: left;
width: 120px;
height: 40px;
}
#nav div + div{
margin-left: 10px;
}
.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
and can you tell me why are you trying to imitate table behavior when you have "table" tag? it could be styled pretty well also
what you are doing is sometimes called "divitis"
edit:
you can position table absolutely http://jsfiddle.net/n83kT/
Not too sure if this the right place to discuss float and display :)
But , flex is on his way, and display is already quiet efficient.
Display + direction and you could kick floats away.
border-spacing version : http://jsfiddle.net/GCyrillus/2EZ3F/
border-left version : http://jsfiddle.net/GCyrillus/2EZ3F/1/
<section>
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</section>
section is to set direction .. or not
unset & reset direction to fake float ,
else use text-align if you dislike this method.
In CSSheet, notice inline-table instead of table so it reacts to text-align and or direction (not all pages are EN or FR :) )
body {
padding: 0;
margin: 0;
}
section {
direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
direction:ltr;/* reset/set here if you want cells from left to right */
display:inline-table;
border-spacing: 10px 0 ;
}
#nav div {
/*direction:ltr; reset here if you want cells from right to left */
display: table-cell;
width: 120px;
height: 40px;
}
#nav div + div {
margin-left: 10px;
}
.red {
background-color:#f00
}
.green {
background-color:#0f0
}
.blue {
background-color:#00f
}
My 2 (late) cents for a different point of view :)
For completeness, I would like to offer the case for the often overlooked inline-block display type.
Similar to the use of floats, the HTML is as follows:
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
and the CSS:
#nav {
position:absolute;
top:0;
right:0;
}
#nav div {
width: 120px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
#nav div + div {
margin-left: 10px;
}
This inline-block approach behaves similarly to the floated-child-div's approach.
In this application, I can't think of a reason to use one over the other.
One minor consideration is that inline-block is not supported in some older browsers.
Otherwise, both approaches use the same mark-up and the CSS rules are similarly simple.
The choice may depend a lot on the content that you use in the #nav div elements.
Demo fiddle: http://jsfiddle.net/audetwebdesign/EVJPN/
this is my first post here. If I am doing something wrong please don't hesitate to tell me.
I have built a navigation bar which looks pretty well:
My HTML:
<div style="width: 864px; margin: 0 auto;">
<nav id="main-navigation">
<ul>
<li id="nav1">Lorem ipsum dolor sit ametzu</li>
<li id="nav2">Lorem ipsum dolor sit am</li>
<li id="nav3">Lorem ipsum dolor sitd</li>
<li id="nav4">Lorem ipsum dolo</li>
<li id="nav5">Lorem ipsum do</li>
</ul>
</nav>
</div>
And this is how it is looking right now:
Notice that each navigation-item's width should be relative to its content. I managed to build this with static width-values (magic numbers) like in the following css:
body{background-color: gray;}
ul{
margin: 0;
padding: 0;
}
nav#main-navigation li{
float: left;
padding: 15px 0;
text-align: center;
margin: 0;
background-color: white;
border-right: 1px dotted #222;
color: #222;
}
nav#main-navigation li:last-child { border: 0; }
nav#main-navigation li a{
font: 11px/12px sans-serif;
text-transform: uppercase;
text-decoration: none;
}
#nav1{width: 218px;}
#nav2 {width: 198px;}
#nav3 {width: 178px;}
#nav4 {width: 138px;}
#nav5 {width: 128px;}
I have two questions with that:
Is it possible to get the whole li-tag to be filled with the link-tag? Can you give me a hint how to do that please. SOLVED!!!
I want to make this responsive. Is it best practice to calculate percentages of the widths? And then put them into a media-query? Or is it even possible to make the li-elements relate to its content (like what display:inline; should normally do)?
Would be really nice if someone more experienced helps :-)
Cheers
EDIT:
As requested, this is my state right now (thanks to Roddy of the Frozen Pea):
http://jsfiddle.net/0xsven/rbz72/
I want to make this responsive in order to display on smaller displays than 960px (which is my max). I want the navigation bar to stretch to the whole length of the div that contains it. Thank you for helping.
The answer to the second question is to make your <li> elements display inline-block and remove the float. This way the menu items will respond to content size like inline items.
nav#main-navigation li{
display:inline-block;
padding:15px 10px;
margin-right: -4px;
}
The negative right margin is a trick to overcome the native gap between inline-block elements.
To make the clickable areas bigger, the solutions would be something like this. Essentially what you need to do is put display: block on the li a element and tell it to take up all available room. It would mean transferring the li's padding to the a, however.
Here is a working JSFiddle demo of this code. I added a grey :hover background-color to the <a> so you can see the effects.
For question number one, one way would be via JQuery. Something like:
$("#main-navigation li").click(function () {
window.location = $(this).find("a").attr("href");
});
$("#main-navigation a").click(function (e) {
e.preventDefault();
});
Would do it.
#2
What I do is set the LI's in a UL to display:block when the screen width starts to deter the look and feel of the menu.
For example:
#media only screen and (min-width:0px) and (max-width:960px)
{
nav#main-navigation li { display:block; width:100%; }
}
The final effect should be a vertical list of menu items. Most of the time I will change the look and feel of the menu item to buttons.
Partial Answer:
To make the clickable area bigger add
nav#main-navigation ul li a
{
display: block;
text-decoration: none;
padding: 10px, 20px;
}
Setting the display property of the tag to “block”Makes the link expand to fill it's container. Padding increases the size of the clickable area, so adjust the values to suit your needs.
1.I'm not totally understanding you here (<li>'s cannot be <a> elements) but I think what you want is for the styling of the <li>'s to be the same as the tags. There are a couple of ways you could do this like styling the :hover states of the <li>s to be the same a the <a>'s. Setting the pointer to cursor may be a good start.
2.If you want your design to adapt to the veiwport's width, you don't necessarily need to use #media. #media is used to set break points in your design where elements can reflow above and below those points, percentages can do the rest. I just used a liquid design here: http://jsfiddle.net/ucbEe/ I removed all the fixed widths and placed a 20% width on the li's (5/100=20% width).
Does that make sense enough?
I need some help sorting out a CSS issue with my website, I have tried everything I can think of but none worked the way that I wanted.
You can view the issue I have here: http://dev.michaelcarrano.com/blog.html
You will notice the tabs are floating instead of being connected to the content part below it.
Here is a link to the CSS file: dev.michaelcarrano.com/css/general.css
Any help?
OK, so a number of changes should be made. The main problem is your <span class="clear"></span> is actually taking up vertical space.
So, first delete <span class="clear"></span> entirely so your HTML should be:
<ul class="menu"> ... </ul>
<div class="content"> ...
Next, in your CSS, add these rules (You should add them in the existing blocks if they exist):
div.content {
clear: left
}
ul.menu {
position: relative;
float: left;
width: 100%
}
#container #search {
float: none;
position: absolute;
right: 0;
bottom: 0;
}
In the first #container ul.menu li, add margin-top: 8px;. And remove margin-top:1px; from the second #container ul.menu li.
In addition to the other suggestions, you should consider setting a more specific DOCTYPE. It helps make your site render more consistently in different browsers. See Fix Your Site With the Right DOCTYPE!
You can solve this changing one simple attribute:
#container ul.menu li#search
{
margin: -5px 0px -10px;
}