This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
100% width bg images not extending on horizontal scroll
I have been struggling with this issue for quite a while. I am building a very basic web application for travel agents, but to give some lay-out we've decided to have a banner with 2 colored sub-banners. The issue is that if I have a resolution of say 1366x768 (px). The banner will naturally fit to the screen resolution if the CSS is correct. This is indeed the case and the 2 colored banners fill up until 1366px.
There is; however a table that is larger than the screen resolution, so once I scroll to the right, I see that my colored sub-banners don't continue at all and are just plain white. Is there any way to make the colored banners continue even after the edge of the screen?
I have included the HTML and CSS code for you:
HTML
<div class="banner">
<span>- ETTA (Electronic Transactions for Travel Agents)</span>
<div class="orangeBanner" />
<div class="blueBanner" />
</div>
CSS
.banner img {
vertical-align: middle;
}
.banner span {
font-size: 30px;
}
.banner .orangeBanner {
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
font-variant: small-caps;
background-color: #f18b02;
}
.banner .blueBanner {
/*Layout*/
display:inline-block;
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
margin-bottom: 5px;
/*Style*/
font-variant:small-caps;
color: #ABD5DF;
background-color: #009DE0;
}
Thanks a lot for your help!
Best regards
As Andy said, <div> elements are not self closing so you should add closing tags to them properly.
If overflowing tables is a problem, just setting a max width should fix that.
e.g
table {
max-width: 100%;
}
The comments you got has some really useful information.
Another quick fix would be the following, making <div class="banner"> always take up 100% of the width and not scroll left and right.
.banner {
width:100%;
position:fixed;
left:0;
}
It might however mess up some relatively positioned elements.
Related
fairly new to CSS and HTML here. I have a few questions:
currently trying to replicate this website, and whenever I resize my window so the width is smaller than my header image (1000px), one of the div starts to move as it tries to stay in the center. Basically I would like to keep all of the text content aligned vertically no matter no big the window size is.
Another question is how do I resize the content of .quote::before. I tried defining width and height, but no success.
Here's a JSFiddle so you can check out the code.
Any help is much appreciated!
To awnser your first question,
you need to remove
padding-left and padding-right property from your .main rule.
.main {
width: 550px;
margin: 0 auto;
margin-top: 45px;
line-height: 25px;
font-family: 'Josefin Sans';
color: #222;
}
I let you try this without padding-left and padding-right
To awnser your another question,
I guess you should use media queries
I let you an example
#media screen and (max-width: 598px) {
.quote {
margin: 0 26px;
width: unset;
}
}
So on a website I'm making a have a navigation bar, I use this code for it.
<div id="container">
<span>Home</span>
<span>Blackmail</span>
<span style="color: #7CFC00">Keeping Safe</span>
<span>Cyberbullying</span>
<span>About</span>
</div>
However this navigation bar is wider than the others, exact same code (Apart from the colour, the colour shows what page you are on)
I would appreciate it if someone told me why this happens or how it could get fixed!
Website - nibble90.github.io
The page with the wider navigation bar is the keeping safe page!
Your #container menu has a fixed width (83em) and a padding. When your content is longer than the page height, it causes a vertical scroll bar to appear and your fixed width elements can't adjust to accommodate it.
You should set its width to be 100% with a min-width of something like 550px and its sizing to be border-box. This will mean it fits your page much more gracefully on different sized browsers and also auto-adjust to the presence or absence of the vertical scroll bar.
So:
#container{
width:100%;
min-width:500px;
box-sizing:border-box;
}
Replace the #container code by this one and it will works. It's better to use % or px instead of em for container width.
#container {
display: block;
width: 25em;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
width: 100%;
}
The width in your CSS is what is throwing you off. Remove the width and the divs will match in size.
#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}
Make sure to remove both because you had width in there twice.
Before I start I'd like to note that I'm very new to HTML and I am self teaching. I just started recently and still have much to learn.
My issue seems simple yet I can't seem to figure it out. Everything else on the page is fine, it's just the footer that's the problem. At full screen the footer stretches the full width of the browser window:
But when shrinking it it accepts the window's dimension but it doesn't center it on the window:
This is the code I'm using in the style sheet for the footer.
div#footer{
background-color: #37184c;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
It is inserted outside of the page wrap which is set to 940px.
div#page-wrap{
width: 940px;
margin: 0 auto;
}
The page wrap is where all of the content above the footer is held.
Is there any way for me to get the footer to continuously stretch to the edge of the screen? Or should I remove the #page-wrap and try to center the content some other way?
Your CSS For Your Footer As Follow:
#footerwrapper {
width:100%;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
#footercontent{
margin-left:auto;
margin-right:auto;
width:940px;
}
<!--HTML MARK-UP-->
<div id="footer">
<div id="footercontent">
<div>Your Footer info</div>
</div>
</div>
This is great because it will also set your footer to match your pagewrap width:940px; and it will keep all your content center with your pagewrap. Hope this helps.
You can try width: 100% on the footer div but without seeing more code, it is hard to fully diagnose.
Also consider using a CSS reset which will remove default values set by browsers that can make formatting/layouting a pain.
http://www.cssreset.com/what-is-a-css-reset/
Thank you everyone for the help! I actually just now came up with a solution:
div#footer{
margin: 0 auto;
background-color: #37184c;
min-width: 980px;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
I believe the issue was the due to the fact that the main content area has a fixed:
div#page-wrap{
width:940px;
margin: 0 auto;
}
It's not dynamic at all so essentially IT was what was hanging off of the edge. Setting a minimum width for the footer prevents this blemish from occurring and meets the edges of the window.
Thanks again for the help!
First of all, want to say, that I'm not a front-end engineer and my skills of UI and UX are very low.
So my question is:
I have a div with p tags inside. I want to have it width: 700px when the browser window is maximized. But if I put this property in CSS of my div. The text will not shrink if I resize the window. So I want to have it up to a certain point while window is maximized and shrink it if you resize the window, without affecting side-bar div.
To be more clear I will give you an example:
Maximazed Browser window:
Minimized Browser window:
HTML
<!-- HOME -->
<div id="home" class="content">
<h2>Home</h2>
<p>AAAAAAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBBBBBBB</p>
</div>
CSS
.content {
padding-bottom: 30px;
position: absolute;
left: 280px;
right: 40px;
top: 0px;
}
.content h2 {
font-size: 110px;
color: #fff;
color: rgba(255,255,255,0.9);
padding: 10px 0 20px 0;
margin-top: 50px;
}
.content p {
color: black;
font-size: 16px;
line-height: 24px;
display: inline-block;
}
You don't need to use Media Queries in your case, but that would be the case in more complicated cases (different breakpoints for example).
Just use max-width: 700px and you're done.
Normal behavior: your paragraph is never wider than 700px.
With very small widths, paragraph occupies the whole width as would any block element and it's still smaller than 700px so no need for MQ!
See this fiddle to see it into effect: http://jsfiddle.net/LQbgJ/ (I used 200px instead of 700)
Compatibility should be IE7+
What you want are Media Queries. Take a look at the W3C recommendations for them.
Basically, the syntax is as follows:
#media screen and (min/max-width: ){
//do something
}
These are called 'break points'. Which means, at the point where the browser reaches the min/max width you provide, you can over-rule other css. So you can make your p and div sizes different.
#media screen and (min/max-width: ){
div {
width: 200px;
}
p {
font-size: 20px;
}
}
Also take a look at Smashing Magazine's tutorial on how to use them.
Hi this is an easy noob question but I have to ask it anyway. See my fiddle:
http://jsfiddle.net/jjalbert/xXdev/
code:
<h1>Hi!</h1>
<p>Some more text</p>
<div id="bottomcorner"></div>
#bottomcorner {
position: fixed;
bottom:0;
right:0;
background-color:red;
width: 100px;
height: 100px;
}
h1 {
color: green;
font-size: 20px;
width: 200px;
font-weight: bold;
}
p {
color: blue;
width: 230px;
}
I have an element fixed to the bottom right but I want it to remain in a static position once a certain browser width is created so that it doesn't start interfering with the content to the left of it.
So in my fiddle once the browser window is about 330px wide I would want the red box to stay in place and become unfixed from the corner of the browser.
Check out CSS Media Queries. This should get the job done.
CSS Media Queries
#media all and (min-width: 300px) {
...css rules here...
}
You could float it right and put it inside of a div with a max-width, then fix the div's position at the bottom instead of the red box to the bottom right.