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;
}
Related
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
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.
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/
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.
It is probably easy to implement, but hard to name it. I am struggling to display this layout:
<ul class='menu'>
<li>
<a>item1</a>
<ul class='submenu'> ... </ul>
<li>
<li><a>item2</a></li>
</ul>
in 2 horizontal lines: first line is ul.menu and second line is ul.submenu
Css:
ul.menu
{
position: relative;
height: 20px;
}
ul.menu li {
display: inline;
}
ul.submenu {
top: 20px;
left: 0px;
position: absolute;
}
Is there a way to do it without position:absolute, so that menu container is in the flow of the document (there is no gap is submenu isn't present)?
I've set up a jsFiddle for this.
If I understand the problem correctly, you want a two-line menu, the submenu of which is still in the document flow, so the page will adjust when there is no submenu.
The catch is this: Without position: absolute, the parent <li> elements will expand to contain the submenu <ul> elements. This will leave your top-level menu items will odd spacing, depending on the width of your submenu elements.
If this isn't a problem, then the above jsFiddle should solve the issue. If it is a problem, then there is a little more work to do (and I don't have a solution quite yet).
Check my answer here, I think it's similar to what you want.
EDIT: sorry, missed the css only idea, here's what I would do:
.submenu{ display:none;}
li:hover .submenu{ display: block;}
Use the following updated CSS. It will work perfectly.
ul.menu {
height: 20px;
}
ul.menu li {
display: inline;
float:left;
}
ul.submenu {
display:block;
margin:0px;
padding:0px;
}