I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
Related
So basically upon resizing browser to smallest possible im still getting horizontal scroll bar for some reason. I cant have this for responsive purposes.
Any ideas?
http://www.techagesite.com/page-1work11122.htm
Another thing while im here
You will notice a email form and another div beside it with a border on it. When the browser shrinks the 2 divs collide and overlap.
Im still learning css and have tried sever approaches but nothing sticks.
Help would be greatly appreciated
The horizontal scroll bar is appearing because <ins class="adsbygoogle"> in the div #box6 has an inline width specified to 200px. To remove the horizontal scroll use the below css
#box6{
overflow:hidden;
}
EDIT: To get the desired effect as mentioned in the comment try the below css in media query for smaller screen.
The MailChimp form has width of 200px specified for its forms. This causes the right column to overlap the left section on re-sizing the window. So by setting width to the div container within the box6 and floating to left both the left and right divs will push the right section below when the screen doesn't have space to occupy both the divs side by side.
Also <ins class="adsbygoogle"> has a width of 200px given inline, so you can remove the width:45% specified for .right-column from your style sheet because this div will take the 200px width of its content.
#media only screen and (max-width: 480px) and (min-width: 321px){
#box6 .container{
width:200px;
float:left;
}
#box6 .right-column{
float:left;
}
}
I know how to align my background image as well as my #wrapper div tag, but I am unable to get them to line up the way I want. Here is the example:
http://www.marathoneindhoven.nl/
The blue runner stays locked to the main div tag when resizing the window. If I add a large #container around the whole #wrapper, when I resize the browser I have a big space on the left side of the screen because the overall width of the #container is still trying to center itself. I have tried using the css property overflow but can not seem to get that to work either.
How can I possibly get this to work??
If you want the blue runner to move with the page then change your css to this:
#wrapper {
background: url(/images/bg-runner.png) right 0 top 150px no-repeat;
}
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/