This is probably an easy question. I have header text that has a background color. The background color stops when the text stops. I want the background to fill the entire length of the container.
<body>
<div class="container">
<p><span style="color:#ffffff; font-size:30px; background-color:#e12025;">I want the background- color stretched across the container</span>
</div>
</body>
css:
body {
background-color:#e12025;
align:center;
font-family:sans-serif;
color:#000000;
font-size:28px;
}
.container {
background-color:#ffffff;
position:relative;
margin-left:auto;
margin-right:auto;
height:1785px;
width:900px;
border-style:none;
padding:10px;
}
Here's an example: http://mm2.co/background-color
If you want everything in the container to 'stretch' across the container, remove the padding in the container:
.container {
padding:10px; /* remove this */
}
If you still want to keep the top/bottom padding in the container, do this instead:
.container {
padding:10px 0px; /* add the 0px */
}
Also, you are going to want to make the display of the span paragraph - block.
Add/change to this:
<span style="display:block;">text here..</span>
um...
.container {
display: block;
}
?
Related
I am trying to position text using div, but its not working well!
.background
{
background-image:url(bg.png);
width:600px;
height:500px;
margin-top:0px;
margin-left:0px;
}
.head1{
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
.background is the background image of the div whereas .head1 is a text within .background div.
You can see it in the html part!
<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>
The text of class head1 are displayed at positions as they are defined! but it also bring the the background image with it!
It seems quiet confusing so I took a screenshot! please check it out!
Maybe my css is poorly coded. please help me out.
Add overflow: auto to parent div.
.background {
background: red;
width:600px;
height:500px;
overflow: auto;
}
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
http://jsfiddle.net/L7q5g6yu/2/
Zero margins on .background can be removed, zero margin is default value for divs.
OR
you can remove the inner div, see this code, it makes the same if you need the inner div just to align the text.
<div class="background">
There are 3 CRUCIAL things that you need to remember...
</div>
<style>
.background {
background: green;
width:500px;
height:400px;
overflow: auto;
padding: 100px 0 0 100px;
color:#d45151;
font-style: italic;
}
</style>
http://jsfiddle.net/L7q5g6yu/3/
Use the following style
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}
Hello guys this has been bugging me for hours.
Im using the layout to get full height containers and sticky footers.
Unfortunately i only want a border in the content but it is not extending to the footer.
I can try to give the the wrap div the borders but i dont want the header to have borders.
The only thing i can think of is giving the header the border color of the background but i dont want to do this.
Is there another way you can do this?
http://jsfiddle.net/VNc33/14/
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border
</div>
<footer>This is a footer.</footer>
</div>
</body>
Image
you can use an inset unblur box shadow on .wrap, so it should not bother much your layout :http://jsfiddle.net/VNc33/5/
.wrap {
margin:0 auto;
position:relative;
width:400px;
min-height:100%;
background:lightblue;
box-shadow:inset 0 0 0 1px;/* here fake an inside border of 1 pixel with text color if none declared */
}
header { background:lightblue;/* background hides inset box-shadow from parent */} http://jsfiddle.net/VNc33/8/ and you can remove borders from .content except the top one : http://jsfiddle.net/VNc33/9/ .
With another CSS approach to build your fullHeight template , you can have header and footer of variable height, using the display properties used by tags . (<footer> inside .wrap)
this method is avalaible in IE from version 8 , lower version wwill ignore the display:table/table-row/table-cell propertie and wil use the default display.http://jsfiddle.net/VNc33/11/
body, html {
height:100%;
margin:0;
padding:0;
}
header {
height:50px;
}
.wrap {
margin:0 auto;
width:400px;
display:table;
height:100%;
background:lightblue;
}
.content {
color:white;
border:1px solid black;
}
footer {
height:50px;
background:darkred;
color:white;
}
header img {
vertical-align:top;/* or bottom or display:block */
}
header, footer {
display:table-row;
}
.content {
display:table-cell;
height:100%;
border:solid 1px solid;/* just put the border here */
}
easy way to apply the border to .content and not mind about how much content is hold
fiddle
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border</div>
<footer>This is a footer.</footer>
</div>
</body>
--
body, html {
height:100%;
margin:0;
padding:0;
}
.wrap {
margin:0 auto;
position:relative;
width:400px;
height:100%;
background:lightblue;
}
header {
height:8%; /* height can be anything but header + content + footer heights must be 100% or the page will scroll */
border:0;
}
.content {
height:84%;
color:white;
border:1px solid black;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
/* keeps height at 84% instead of 84% + 2px for border */
}
footer {
height:8%;
background:darkred;
color:white;
}
Change .wrap min-height to just height and add height:100% to .content
I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
Why cant I scroll all the way to the bottom? What is the solution?
Sample here: http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
Repeat li 20 times
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container {
width:260px;
height:100%;
overflow:hidden;
background:silver;
margin:0 auto;
font-family:sintony;
}
.header {
width:100%;
height:60px;
background:#000;
}
.left {
width:260px;
height:100%;
background:#fff;
float:left;
overflow:scroll;
}
li.hybrid a {
display:block;
background:#16BF14;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
li.purple a {
display:block;
background:#3370CC;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
p.title {
position:relative;
padding-left:10px;
}
p.type {
font-size:12px;
position:relative;
padding-left:10px;
}
ul {
margin:0;
padding:0;
}
li p {
margin:0;
padding:0;
list-style-type:none;
}
As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.
You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
.container {
box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
padding-top: 60px;
}
.header {
margin-top: -60px;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
body {
margin: 0;
padding: 0;
}
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
Remove the overflow: hidden; from .container class
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
http://jsfiddle.net/atYpX/
i would recommend following
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
http://jsfiddle.net/D5KU3/8/
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
#topnavbar {
width:100%;
padding:0;
border:1px solid gray;
margin:0; }
#topnavbar p {
margin:0; }
body {
margin-left:auto;
margin-right:auto;
margin-top:0;
width:1024px; }
That is my code. How do I get it to have the bar(which is named topnavbar) to fit the whole screen without overflowing? And I don't want to do overflow:hide; or whatever.
You mean fit the whole width of the screen?
Paradoxally, you just need to remove width:100%(the borders are being added to this value...)
EDIT: And yes, Kai Qing is right, too - I missed that. If you put width 1024 on your body, your navbar will be 1024, too...
Your css is a little off:
#topnavbar {
width:100%;
padding:0;
border:1px solid gray;
margin:0;
}
#topnavbar p {
margin:0;
}
#container{
width:1024px;
margin: 0 auto;
}
body {
/* you do not need any of your css here */
}
html:
<body>
<div id="topnavbar">
<p>Some text</p>
</div>
<div id="container">
whatever you want to center
</div>
</body>
the basic idea is to width 100% an element who does not have a parent and then apply your centering container beneath it. In this case, #container.
Your css was applying a width to the body and therefore it was likely messing up your whole layout.