I am making a "Starcraft II" website for my clan. And I want the navigation bar to contain the text "ALLOYE" and stick to the bottom of the navigation bar. I have tried this code:
vertical-align:text-bottom;
But the text seems to say about 10 pixels over the bottom. Is it becouse some hidden border or something?
This is my total HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="title">
<strong>ALLOYE</strong>
</div>
</div>
</body>
</html>
And here is the CSS code:
body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
height: 7%;
background: -webkit-linear-gradient(#FFB441, #FF9A00);
background: -o-linear-gradient(#FFB441, #FF9A00);
background: -moz-linear-gradient(#FFB441, #FF9A00);
background: linear-gradient(#FFB441, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
}
If you temporarily set a border on both classes, you will see what is happening.
Once you see that, try putting the 7% height onto the .title instead.
Then do the following to see what happens:
change the height of your browser window to very short heights.
look in different browsers (IE, Chrome, Firefox etc)
look at it on your phone
Press F12 when in your browser and experiment
Good luck.
It is likely that the .nav height (7%) is causing the overlap. If you set this to px instead of a % you should be able to force the 'ALLOYE' below the bar.
Something like the below:
.nav
{
position: absolute;
width: 100%;
height: 15px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
You want something like:
.nav{
position: relative;
width: 100%;
height: 80px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: absolute;
font-size: 65px; /* This large a font has significant whitespace at the bottom */
bottom: -15px; /* Compensate for font whitespace. Tweak to fit your font /*
}
But other than that, as Ruskin suggests in his answer, you probably want to set a fixed height on your navigation.
Remove the height: 7%; from .nav and add it to .title:
(Updated CSS):
body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
height: 7%;
}
Fiddle:
http://jsfiddle.net/Wae6n/3/
Use the bottom CSS property on the element containing the absolute positioning property (in this case, it's .nav). Set the bottom property's attribute to 0%. Your css should look something like this :
.nav{position: absolute;bottom:0px;}
First off, I think you need a reset, as I am not seeing the space in my jsfiddle with no changes to your code (http://jsfiddle.net/R6dTU/).
Then I'd actually follow a different approach here. I'd absolutely position the title so that it is
.title{
position: absolute;
bottom: 0;
}
I'd also recommend not using percentage heights without a min-height, unless you don't mind your text being cropped off screen.
Also, keep in mind that vertical-align: text-bottom; aligns the text to the bottom of the descenders (e.g., the tails on lower case p's and q's), so you will not quite get the effect you're looking for with this. Position absolute is more reliable.
Per #ANeves's comment, The reset is not the 'best practice' solution here, but it may be a quick fix. The proper solution would be to
Use a proper tag for your header text. divs should only be for elements that cannot be otherwise classified. I'd suggest a h1 tag here
Set margins and padding on this tag, and set a line-height, otherwise it may change between browsers (this is what the reset is a quick fix for)
Related
Within my body tag I have a header and div#content element. My aim was to create a fixed header and then push the content of the content element out from under it using a margin-top attribute. However when I did this the header also moved down as though it were joined to the content. I fixed this by adding a position: absolute to the content. The trouble is I cant explain to myself why it worked. It just did. I am using Firefox on Ubuntu.
This is the header css:
header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF;
width: 100%;
z-index: 1;
}
This is the content css:
#content {
position: absolute;
margin-top: 100px;
}
Here is the codepen.
Please educate me someone :)
Several observations:
position: absolute; didn't really fix it. Check out this codepen for a demonstration. Notice the fair amount of content I added after your divs and how they don't display correctly? This is because:
You had a typo on your first css element. Here's a codepen demonstrating a fix: http://codepen.io/anon/pen/YwvBJy You wrote , instead of ;. You didn't close the top: ; attribute so your browser tried to fix it by using the #content margin-top.
Bad syntax-- used a , instead of ; on line 3
header {
position: fixed;
top: 0px,
left: 0px;
so the attributes top and left are wrecked.
You used a comma instead of a semicolon here
head { top 0px }
Please replace the comma with smemicolon than you dont need position: absolute .
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)
http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD
Excerpt:
nav {
background: black;
color: white;
float:left;
width:20%;
height:800px;
display:inline-block;
/*margin-top: 40px;*/
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#main {
background-color:#04cfe1;
float:right;
width:80%;
/*margin-right:10px;*/
}
Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.
I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.
Full page site: http://rubergaming.com/project/
Thanks a ton!
You can achieve this by using height 100%, but you may have forgotten that you also need to give container elements a height of 100% in order for that to work when you are giving your #main div that 100% height. I also slightly modified some of your other styles, you may need to tweak as needed. http://jsfiddle.net/ngz6e5p1/.
/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
height: 100%;
}
/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
height: 100%;
padding-top: 0px;
padding-bottom:0px;
}
What do you mean for the black bar to go all the way? And to span the blue div across the rest of the page try this:
<div id="main" style="
position: absolute;
margin-left: 20%;
bottom: 0;
top: 0;
">
//ALL THE OTHER STRUFF INSIDE THIS DIV
</div>
http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form
I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!
Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.
This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.
The image element itself has width and height attributes of 35x35 even though the image is 45x45.
You're restricting the height, that's why it's cutoff.
Comment out the height rules like this:
#comments-block .avatar-image-container {
left: -41px;
width: 48px;
/* height: 48px; */
margin-top: 25px;
}
.comments .avatar-image-container {
float: left;
/* max-height: 36px; */
overflow: hidden;
width: 36px;
}
#comments-block .avatar-image-container {
/* height: 37px; */
left: -45px;
position: absolute;
width: 37px;
}
Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.
Remove these three and it should do the trick. I think padding is the main culprit here along with other things.
#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}
1) Remove padding from
2) Remove max-height from .avatar-image-container
3) You're done. Play with settings to get desired results.
.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.
The image also has height="35" inline, which is not affecting on chrome, but can be removed.
I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body { text-align: center; }
.wrapper {
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
.main {
background: #900;
height: 700px;
}
.right, .left {
position: absolute;
height: 100px;
width: 100px;
}
.right {
background: #090;
top: 0px;
left: 960px;
z-index: 1;
}
.left {
background: #009;
top: 0px;
left: -100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
This works in IE6-9, FF3.6, Safari 5, and Chrome 5. Didn't seem to matter what doctype I threw at it(none, xhtml 1 transitional, html5). Hope this helps, that was an interesting problem.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
body {
overflow: auto;
}
#container {
min-width: 960px;
zoom: 1; /*For ie6*/
position: relative; /*For ie6/7*/
overflow: hidden;
margin: 0 auto;
}
#main {
background: #cea;
width: 960px;
margin: 0 auto;
height: 700px;
position: relative;
top: 0;
}
#right,
#left {
position: absolute;
height: 100px;
width: 100px;
top: 0;
z-index: 100;
}
#right {
background: #797;
right: -100px;
}
#left {
background: #590;
left: -100px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>
Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.
So use what you have now with this adjustment:
html, body {
height: 100%;
width: 100%;
margin: 0;
*overflow-x: hidden;
}
body { text-align: center; overflow-x: hidden; }
Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.
I was having a similar issue to this and was completely tearing my hair out as I found the solution above didn't quite work for me. I overcome this by creating a div outside of my main container div and using min-width and max-width to come up with a solution.
#boxescontainer {
position: relative;
max-width: 1100px;
min-width: 980px;
}
#boxes {
max-width: 1100px;
min-width: 900px;
height: 142px;
background:url(../grfx/square.png) no-repeat;
background-position: center;
z-index: 100;
}
I found however that I also needed to make the square.png image the size of the div so I made it as a transparent png at 1100px. This was my solution to the problem and hopefully it might help someone else.
On a side note I also had an image on the left side in which I used absolute positioning which didn't have the same scrollbar issue as the right side. Apparently the right and left side do take on different properties from what research I did regarding this matter.
In regards to people using overflow-x:hidden I would have to disagree with this method mainly because you are taking away the users ability to horizontal scroll completely. If your website is designed to be viewed the a 1024px resolution then people who are on an 800px resolution won't be able to see half of your website if you take away the ability to horizontally scroll.
Your body is not set to relative.
Not knowing what you'd like to do with this, I would perhaps set a background image on the body instead.
You're getting a scrollbar only when the viewport's thinner than the main plus that right box, right? (Don't think that was clear to some people.) This is expected browser behavior for content overflow.
Depending on what you want to happen (why do you want it to disappear in this circumstance, if you do?), you could set overflow:hidden on .wrapper. That would always hide it--if you're looking to dynamically display it on some other event, that'll work.
If I'm not mistaken, though, you just don't want it to show when their viewport's only 960px wide. AFAIR you can't do that without some js/jQuery. My suggestion would actually be--especially if you don't want to mess with javascript--if you want this content to be visible at all, accept the scrollbar at narrow widths. It might irk you as a designer, but most people won't notice it, and those who do can still access your content--which is a win, right?
Wrap all the elements in a div, make that div position relative and overflow hidden. It solves this problem every time. :D
If the page language is left-to-right, then the left non-fitting elements don't cause a scrollbar.
Try this:
<html dir="rtl">...</html>
This will change the text direction of the page to Right-To-Left, and now the left div will cause a scrollbar, not the right one.
You can do the same with direction:rtl css property.
If you want your page render to be independent from text direction then you can arrange page elements differently to avoid this.
Old question I know, but may help someone else out. The below expands on James response but works in IE6/7/8/9, FF and Webkit. Yes it uses evil expressions but you can put that in a IE6 specific stylesheet.
#bodyInner {
width: 100%;
min-width: 960px;
overflow: hidden;
width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}
I needed a solution like this too - thanks to all who suggested the 100%-wide wrapper with overlow-x hidden. However, I don't think you have to add the extra #bodyInner div - I've successfully tested it applying the width and overflow attributes directly to body in Safari, Opera, Firefox, Chrome, and IE8.
I have a solution that doesn't work in IE7/IE6, but seems to be fine everywhere else.
Create wrapper (#bodyInner) around everything inside your <body> tag.
Apply this CSS rule:
#bodyInner {
width:100%;
overflow:hidden;
min-width:960px;
}
Too bad you can't just apply this on the <body> element.