Background should shows in all divs but it's not visible.
http://jsfiddle.net/uxUqJ/1/
I need to my backgroud be shows in all divs. Background is defining in styles container div. Etc.
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
How can I fix this?
I think you need to add overflow:auto; to your css... I've also removed the quotes
#content{
width:1049px;
overflow:auto;
background: #000 url(http://s1.wp.com/wp-content/themes/pub/dark-wood/images/postflowerback.png) ;
}
the Div currently has no height... however what do you want to do with the background regards repeating or position, here's a good reference point https://developer.mozilla.org/en/CSS/background
You must specify height property and set repeating of background.
#content{
width:349px;
height: 700px;
...
}
Alternately, you could add <div style="clear:both;"></div> after the closing for text3. This would then stretch the container divs around the elements even though they are floated.
You have your elements floated. You need to clear the float before closing the wrapper element in order to have the #content to grow normally:
See this working Fiddle Example!
CHANGE YOUR MARKUP TO THIS:
<div id="content">
<div id="text">
<div id="text_1">...</div>
<div id="text_2">...</div>
<div id="text_3">...</div>
<div style="clear:both;"></div> <!-- Add this line -->
</div>
</div>
Additionally, you can remove the inline style and use a class.
Change your css to smart way
<style>#content{ display:table;
width:1049px;
background: url("image_src") ;
}
#text{
display:table-row;
width:1049px;
padding-left:27px;
padding-right:28px;}
#text_1,#text_2,#text_3{ display:table-cell;
padding-left: 40px;
width: 278px;
}#text_3{
padding-right:40px;
}
</style>
Clear the #text div.
add the following styles:
#text {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
#text:after {
content:"";
display:table;
clear: both;
}
DEMO:
http://jsfiddle.net/uxUqJ/13/
Related
See the HTML and CSS below.
When the h1 tag is uncommented, a scrollbar is added to the page, but I don't know why. I suspect it's because the cards have position:fixed, but I don't know how to get them to look like that any other way besides position:fixed.
I would like the title div to take up 20% of the screen and the card-conveyor-belt div to take up 80% of the screen, regardless of their contents. How can I go about doing this?
HTML:
<body>
<div class="title">
<!--
<h1>
HELLO
</h1>-->
</div>
<div class="card-conveyor-belt">
<div class="card left"></div>
<div class="card center"></div>
<div class="card right"></div>
</div>
</body>
CSS
html,body{
height:100%;
margin:0;
padding:0;
background-color:#ccc;
}
.title{height: 20%;width: 100%;}
.card-conveyor-belt{
height: 80%;
width: 100%;
}
.card{
position:fixed;
width:80%;
height:80%;
background-color:white;
border-radius:5px;
}
.center{
left:10%;
}
.left{
left:-78%;
}
.right{
left:98%;
}
Here is the same code in a jsfiddle if you'd like to run/interact with it.
Simply use margin: 0 to fix your problem:
Jsfiddle: https://jsfiddle.net/dj3mabgz/
h1 {
margin: 0;
}
Like the other answer stated, the issue is with the margin on the <h1> tag. By default (at least in Chrome it is default, not certain about other browsers), all <h1> tags have a default margin top value of 0.67em.
Now, since you didn't define where you wanted to position the block inside your .title block, it automatically positioned it at the top. So the result is as you can see in the picture;
The default margin and the default positioning ends up "pushing" all of the content down and forcing the scrollbar to appear.
So, I have a problem, I can't seem to find a solution. I know that this is something ridiculously easy, but I'm still a noob...
Whenever I use command float:left, these 2 .con-icon and #con-info runs across to next div called #test (the one in color dark red). But I need them to stay within #contain borders.
Here's the code: http://jsfiddle.net/3eoj06b3/.
<section id="contain">
<h1>Contain</h1>
<div id="con-info">
<div class="con-icon">
<h2>1</h2>
<h2>1</h2>
<h2>1</h2>
</div>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
<div id="test"></div>
</section>
CSS is in the link
What am I doing wrong?
Add this to your CSS:
#con-info:after {
content: " ";
display: block;
clear: both;
}
Just add overflow:auto; line to your #con-info class. http://jsfiddle.net/garsdubh/. This will make your parent element aware of its floated children heights.
Use overflow: hidden on #con-info. Since you have declared height: auto for #con-info you need to hide the overflow as well to have automatic height.
DEMO
#con-info {
overflow: hidden; /* This is added to your Fiddle */
position:relative;
border:2px solid #C60;
width:40%;
height:auto;
margin-left:10%;
}
I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.
CSS
#content
{
text-align: center;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.
text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.
try this
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
CSS
#content
{
text-align: center;
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
overflow: scroll;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
}
live fiddle here
You can add display:inline;margin:auto to your <div>.
I have a structure like this
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
text
</div>
<div id="fourth">
text2
</div>
</div>
Some other stuff...
</div>
</div
Here's the css for it at the moment:
#first {
width:960;
}
#second {
position:relative;
}
#third {
position:relative;
top:0;
right:0;
}
#forth {
position:relative;
top:0;
left:0;
}
Now I would like from the fourth items to stay in a row and from the third item to stay on the right side of the second div. The second div also has a width 960 like the first one.
What's the problem with this? why it isn't working?
Edited and should work(untested):
<div id="first">
<div id="second">
<div id="third">
<div class="fourth"> <!-- changed to class -->
text
</div>
<div class="fourth"> <!-- changed to class -->
text2
</div>
</div>
Some other stuff...
</div>
</div> <!-- was missing closing bracket -->
And the style:
#first {
width:960px; /* was missing px */
}
#second {
position:relative;
}
#third {
float:right /* Makes the element float on the right side. Might want to clear in a later id/class to avoid quirks */
position:relative;
/* Removed redundant top:0; and right:0; */
}
.fourth { /* Changed to class and fixed spelling */
position:relative;
/* Removed redundant top:0; and right:0; */
}
ID's should be used for elements that will only be used once. Classes should be used for elements that can/will be used multiple times.
For the forth div, why not use inline-div? [not sure it works on IE7 and below]..and im think the third can be floated to the right.
Also shouldn't you be using classes as opposed to multiple elements with the same id?
#third {
float: right;
position:relative;
top:0;
right:0;
}
#forth {
display:inline-block
position:relative;
top:0;
left:0;
}
First, 960 isn't a width. Without a units specifier, it's just a number. 960px is a width.
Second, those other divs are positioned correctly, but their widths are 100% (the default), so they just look like they're stacked. The positioning is not noticeable because of that.
Edit: You also misspelled "#fourth" in your CSS selector.