CSS Error in the navigation menu - html

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

Related

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).

How to change HTML divs' order with Responsive CSS?

I'm trying to make a responsive version of the "Holy Grail" CSS layout by Matthew James Taylor
So that the Mobile page should render like this:
left
content
right
I tried changing the float rules as in this fiddle, but I couldn't make it work. Try to change viewport size around 600 px.
Is there a way to do this without JavaScript ?
Thanks for any help !
You could make the divs relative and change the margin-top so that it's in the right order.
This is pretty hackish, but it at least gets them in the right order. It only really works if you know what height column 1 will be.
.holygrail .col1
{
margin:0;
position:static;
width:100%;
margin-top: 3ex;
}
.holygrail .col3
{
left:0;
width:100%;
margin:0;
float:none;
}
.holygrail .col2
{
width:100%;
top:0;
margin:0;
right:0;
position:absolute;
}
(This goes inside the media query.)
I looked into this some more, and found another Stack Overflow question where the answers have some good discussion about what you're trying to do. (Basically, this isn't something that CSS can do reliably.) The answers also include some hacks that are better than the one I proposed earlier.
You can use direction to achieve this
The direction property in CSS sets the direction of of content flow
within a block-level element. This applies to text, inline, and
inline-block elements. It also sets the default alignment of text and
the direction that table cells flow within a table row.
CSS:
.main-content {
direction: rtl; /* Right to Left */
}
The valid values are:
ltr - Left to Right, the default rtl - Right to Left inherit -
inherits its value from the parent element
source: http://css-tricks.com/almanac/properties/d/direction/

CSS Bar-type Menu

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.

CSS content will not wrap multiple divs

OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO

drop down sliding underneath content.. i have tried EVERYTHing.. :(

Hey guys, ive been working on this drop down for wayyy to long now. I just cant get the drop down to fall on top of the main content on the page. I have tried adding position: relative and z-index on all relevant areas.
I think what may be causing the problem is "overflow: hidden" in some places.. but that is by far my favorite way to contain floats..
http://dev.redstoneinvestments.com/index.php?s=&p=redstone&v=home
Any suggestions?
Remove position: relative and overflow: hidden from both header and maincontent. If you need to clear the floats, use the clearfix method: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/ (this article specifically explains why clearfix is a better solution than overflow: hidden when you have absolutely positioned elements that need to extend outside the container).
change #header css to
#header {
background-color:#FFFFFF;
height:140px;
width:900px;
}
that enough, it fixed the problem on my firefox.