CSS Bar-type Menu - html

I'm trying to solve the logic of user interfaces for a while. Completely new as you can imagine, and still digging into CSS stuff.
I'm trying to create a "bar type" menu where the inner part has a fixed width, with logo on the left and menu items on the right. Here is a picture to tell you what I mean:
Here is how far I've gone:
http://cssdeck.com/labs/31sxhkiv
The problem is: I have no idea about how I should put the menu items up there to the right of the loating center-part of the bar.. I've tried floating them to the right (the order changes) and giving them an absolute value... none of them helped.
I'm sure I'm missing a point, so wanted to give SO a shot about this!

#content{
background-color: gray;
height: 25px;
width: 600px;
margin-left: auto;
margin-right: auto;
position:relative; /* ADD THIS LINE */
}
#menu{ /* ADD THIS STYLES */
position:absolute;
right:0px;
top:0px;
}

I really don't think absolute positioning is what you want, because it's a pain to add new items later. Here's my fork of your cssdeck. I think this is closer to what you wanted, but you'll have to make that call. My main idea is to make your menu items inline-block with position:relative so that items will render in the right order and layout nicely. Even with relative positioning, you can nudge items left or right using margin.
Edit
I created a new fork which I think saved my work this time. Also, I decided to go ahead and leave in the float paradigm, because that's probably more what you wanted. The trick is to set up #menu to float right, while the menu items float left. I didn't think to add it, but you'll probably want to add a new line to clear the floating behavior:
#menu:after { clear:float; }

You can use a ul with li items display: inline and position it absolutely inside a relatively positioned container.

Related

Position bootstrap popover

I'm trying to implement a popover for language selection, but encounter two problems:
1) The popover is hidden above the footer when I apply position: absolute; to the footer.
2) The popover sticks to the right side of my page. I would like a margin there, but margin-right doesn't seem to have effect.
Here's a jsfiddle.
Note: this might not be the case with newer versions of bootstrap, but I'm using this one in the rest of my site and migration to a newer version is out of scope for now...
EDIT: I fixed the first problem by adding {container: 'body'} to the tooltip. Second one still open...
EDIT 2: I managed to add a margin on the right by using:
.popover
{
right: 10px !important;
left: auto !important;
}
The only problem now is that the arrow isn't centered with the text beneath the arrow anymore... any tips?
One way to accomplish this is by adding a fixed position position:fixed; right:40px; to your #wrapper. This will allow you to adjust your position to the left and or right. However, if you attempt to adjust top or bottom it will break out of its parent container and be relative to the document. Therefore, if you need to make adjustments to top or bottom use margins.
#wrapper{
min-height: 50px;
max-height: 100px;
display: flex;
align-items: center;
position:fixed;
right:40px;
}

Unordered list menu unable to position it correctly + unable to center the list items within the unordered list

Take a look at the fiddle below:
Fiddle: http://jsfiddle.net/TE8hD/
In it you can see my problems:
The list items within the <ul> are not centered as there is a big margin to the left while there is no gap at all to the right.
Also the <ul> itself cannot be properly positioned the way I want it to. I want it to be 200px from the right and 0px from the bottom. However when I try this I can only get the right property to work.
I've been trying to fix this for the past 2 hours, changing everything from position, float, display, margin, padding etc. Nothing seems to do the trick, if I could get some help solving this it would make my day.
Add:
padding: 0;
margin: 0;
To your .dropdown class.
And look into implementing a reset.css file, which typically resets margin, padding, and other properties on a lot of elements so that you have a blank slate when creating your CSS.
Also, you seem to lack an understanding of what position: relative and position: absolute do. Do some research on that. But if you want your UL to be positioned absolutely at the bottom of its containing element (.header), then .header needs to have position: relative and .dropdown needs position: absolute;
Fiddle: http://jsfiddle.net/TE8hD/2/

Properly position footer

I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).

CSS Error in the navigation menu

I'm creating my portfolio. While doing that I just come across with an error in the top menu. It's aligned to left. I tried my level best to solve that problem. I need that to be central aligned. Can anyone please help me? Url is http://jilsonthomas.com
Also footer is not extending to the stream sides. ( both left and right) please help....
Cheers...
You can center the menu by making the list an inline element with display: inline-block; and by specifying text-align:center; on it's parent div#menu.
#menu{
...
text-align:center;
}
#menu ul{
...
display:inline-block;
margin:0;
padding:0;
}
Another option would be to set a width on the list and keep it a block element and specify margins left/right auto, but that would be kinda hackish.
To solve the footer issue just remove the margin and padding on the body. It's the margin in this case, but it's good to remove them both. I'm not sure, but it may vary from browser to browser.
body{
margin:0;
padding:0;
}
Also you may want to use a CSS reset to avoid all sorts of problems like this one.
Hope this helps you,
Alin

Strange div margin issue

I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}