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.
Related
I've been scratching my head with this one for a while. I need to make a ul li menu reduce width responsively. At the moment the last li wraps to another line as the screen width is reduced. Whilst I've managed to do it on one of my menus, the same type of css won't work on this as the li contents are not equally sized. I did find a fiddle from a previous SO question, but trying that method it completely breaks the styling of the dropdown for "Shop By Products"
I'm trying to achieve something like this as the viewport is reduced.
http://jsfiddle.net/au9muz43/
where the css is very simple as
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}
I've set up a fiddle with a large chunk of my css and html here: https://jsfiddle.net/1Le63xk0/1/
Even adding
display:table-cell;
to my css line
.mega-menu li{float:left;text-align:center;position:relative;margin-right:15px;border:none;}
breaks the dropdown layout for the Products
So a quick combining of the two fiddles, I noticed that some of the styles conflicted. I removed your display:block calls on the li / a, and made them display:table-cell; (which is the reason why it will shrink, instead of drop to a new line.
Brought all your css over, this was just a case of fixing certain divs that were still styled as block/inline-block and converting them to table formats.
The main issues were found in these lines:
.mega-menu li a{color:#fff;outline:0;padding:12px 35px 0px 0px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a{color:#007dc5;position:relative;z-index:11;padding:4px 11px 3px 11px;}
Where you had a large amount of padding that was pushing each div.
Here is the JSFiddle.
Edit: Updated just to bring more of his css over.
Edit 2: Still getting downvoted, there literally is no other way to explain it other than, double checking OPs display properties. OP hasn't responded explaining something is wrong with the fiddle, so as far as I can see, it has everything he asked for: A shrinking nav, with his dropdowns working the same.
First: there is a ; missing on width:100%. Secondly it can be solved by changing display to block and inline-block. The table display is for tables and (probably) not intended to be used in this case.
.horizontal-style {
display: block;
width: 100%;
}
.horizontal-style li {
display: inline-block;
float:left;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}
div {
background: #ccc
}
<div style="width: 100%;">
<ul class="horizontal-style">
<li>Home</li>
<li>Shop By Products</li>
<li>Shop By Brand</li>
<li>Why Choose Us</li>
<li>Support</li>
<li>Offers</li>
<li>Contact Us</li>
</ul>
</div>
Take a better look in this JSFiddle. StackOverflow snippet does not support resizing.
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.
It's kinda hard for me to explain the problem, so let me give you the URL.
Visit http://www.ucaftercruz.com
If you look at the footer, theres an unordered list aligned vertically. When you drag the browser and make it smaller, the list goes from one line to two lines. How do I make it so that it stays in one line and in the center of the footer regardless of window size?
I suspect it has something to do with my divs.
Here is my html code:
<div style="clear:both;">
<div id="footer">
<div id="footer-pages">
<ul>
<li>About the blog</li><span></span>
<li>The Authors</li><span></span>
<li>Archives</li><span></span>
<li>Credits</li><span></span>
<li>FAQ</li>
</ul>
</div>
And here is my CSS:
#footer {
height: 100px;
background-color: #d0cabc;
font-size: 12px;
}
#footer a {
color: #606060;
}
#footer-pages {
padding: 20px 0;
border: 0px solid green;
margin: 0 auto;
width: 35%;
}
#footer li {
display: inline-block;
margin: 0 15px;
}
In order to make it so that the menu can be dynamically added to, you should make the container width (#footer-pages) to be a fairly wide div, and center the contents. I used the following code via the inspector:
#footer-pages {
width: 100%;
text-align: center;
min-width: 500px;
}
add #footer { white-space: nowrap } to your css for footer. You could also add min-width:###px where ### is big enough.
In the first case, you tell the rendering engine to avoid making the box any smaller than the minimum required to contain the text. I actually don't know for sure if this will work on this kind of list.
In the second case, which I know works, but is a little less elegant, will force the engine to keep the layout box no smaller than a specific amount -- if you choose an amount that will contain the text, it may add scrollbars (which you can control with the overflow property) but not cause the text to wrap.
I've been working on website recently and have come across a major problem :http://jimbob.webatu.com/index.html(you'll need to see the coding on the webpage).I've set my website up so that there are two main columns but are centered into the middle.The id wrap is what centers everything together and the two columns float left or right:
#wrap {
width:750px;
margin:0 auto;
background-color:#6E6E6E;
border-left:3px solid #A9E2F3;
border-right:3px solid #A9E2F3;
}
#main {
float:left;
width:496px;
background:white;
border-top-right-radius:5px 5px;
border-bottom-right-radius:5px 5px;
}
#sidebar {
float:right;
width:250px;
} `
Recently though i tried to add a footer bar like with the navigation bar at the top. this has been set to stay in the warp overall by using "clear:both" and have been trying to make it avoid the "wrap" id altogether.However something has gone wrong and the div's that control the "wrap"and "secondborder" won't fully close. Also as you may see a gray bar has appeared behind and the "wrap"background won't apply(I've set the sidebar background to nothing so that the "wrap" background applies to it. This makes it look a bit neater).I cannot paste the required coding as there is too scattered and is too long(look at the page source on the webpage).
Can anyone provide a solution to the "wrap" background and the "footer" not centering? I have only been learning html and coding for the past 3 months so please forgive me if this is a stupid mistake I've made. The link again to my website where the problem is : http://jimbob.webatu.com/index.html
Add the overflow: hidden; to your #wrap as such
#wrap {
width: 750px;
margin: 0 auto;
background-color: #6E6E6E;
border-left: 3px solid #A9E2F3;
border-right: 3px solid #A9E2F3;
height: auto;
overflow: hidden;
}
In order for your #footer to act like a footer at the bottom of your page you will have to take it out of your #sidebar and place it after the closing for #sidebar. This should fix your problems.
To fix the #sidebar being cut off you need to float it left as opposed to right as suc,
#sidebar {
float: left;
width: 250px;
}
Hopefully this helps.
Generally speaking you need to clear after your floating div's. This tells the browser to stop the floating for the next element. Looking at your HTML I'd add before the <div id="footer"> <br style="clear:both" />
Also, before you close #wrap add another <br style="clear:both" />
I just added a new div to your secondborder element: <div style="clear:both"></div> that sorted the problem. You were floating and not clearing the sidebar or the main div.
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.