Below is a simplified version of my problem. Considering the following piece of HTML:
<div id="div1" style="display:none">
text i do not want
<div id="div2" style="display:block">
text i want to keep
</div>
</div>
But of course, "text i want to keep" will not be displayed because the
parent div is not visible.
Question: How do you only dispaly the content of the inner div?
Due to the widget blogger uses, I have no access to the code and need to clear the outer div with some CSS. I have already ruled out font-size: 0; after reading this. Messing with negative margins too is ruled out, due to position of elements.
try this:
color: transparent;
background: transparent;
of course, that won't actually make the text non-selectable, just non-visible.
Really what you're trying to do is sort of against the box-model concept, and it'd be better if you were able to enclose the text you didn't want to see in a separate div of equal level to the one you do want to see, and then hide that other div, i.e.
<div id="div1">
<div id="div3" style="display:none">text i do not want</div>
<div id="div2" style="display:block">
text i want to keep
</div>
</div>
Due to the hierarchical nature of HTML, this is a hard nut to crack. The common solution is to move one element out of the other and style them so that they appear to be nested, but I assume you cannot do that in this case.
The only solution I can think of that will nullify the parent element while keeping the child element is absolute positioning, but that will be hard if you've got dynamic heights/widths on the elements.
But try this:
#div1 {
/* You might want to set a height here appropriate for #div2 */
position: relative;
text-indent: -10000px;
}
#div2 {
left: 0;
position: absolute;
text-indent: 0;
top: 0;
}
Do you want just the text to disappear or the space that the text takes up to collapse too?
If you just want the text to disappear, use
<div id="div1" style="text-indent:-9999px;">
text i do not want
<div id="div2" style="text-indent:0">
text i want to keep
</div>
</div>
try this it helped me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: #fff;
font-size:100%;
}
#hide {
visibility:hidden;
}
#show {
visibility:visible
}
</style>
</head>
<body>
<div id="hide"> hide this text
<div id="show"> show this text </div>
hide this text too </div>
</body>
</html>
Enclose the 'Text I do not want' in another DIV or SPAN with display:none style.
Related
I need help with this simple example which I designed just to understand INLINE-BLOCK related layouts. It's simple:left and right parts, and inside right part there're up and down elements. I want the right part in the center of the [screen width minus left part], while inside right part h3 and p elements align left. I added a border just to understand if I've fully used space of the righthand screen. Sometimes my hands are tied so I can not change html, so I need pure css method.
I do have read some of the similar questions here, but after some tests I'm still lost ---- for example, giving a width:500px to right part? but I need right part CENTERED for different screens! Another problem: right part text-align:center will also influence inside elements; inside elements text-align:left will also influence right part.
Please note: this is about inline-block....and pure css.
Appreciate any response.
.left{
display:inline-block;
background:aqua;
}
.right{
border:solid;
display:inline-block;
}
<OCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="whole">
<div class="left"><p>lefter</p></div>
<div class="right">
<h3>upperright</h3>
<div class="lowerright"><p>sdfsdfsdfsdfsdfsdd</p>
</div>
</div>
</div>
</body>
</html>
The attached image shows my thought.
added
margin-left: 50%;
transform: translatex(-50%);
to .right. hope this helps. thanks
.left {
display: inline-block;
background: aqua;
}
.right {
border: solid;
display: inline-block;
margin-left: 50%;
transform: translatex(-50%);
}
<OCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="whole">
<div class="left">
<p>lefter</p>
</div>
<div class="right">
<h3>upperright</h3>
<div class="lowerright">
<p>sdfsdfsdfsdfsdfsdd</p>
</div>
</div>
</div>
</body>
</html>
I'm just trying to put a div next to the other. I've found 2 different ways. You have them here below. But I don't know what of them is more correct..
<html>
<head>
<style type="text/css">
.jander1{
width: 100px;
height: 100px;
float: left;
border: 5px solid;
}
</style>
</head>
<body>
<div class="jander1">jander1</div>
<div class="jander1">jander1</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.jander1{
width: 100px;
height: 100px;
float: left;
border: 5px solid;
}
.jander2{
width: 100px;
height: 100px;
margin-left:100px;
border: 5px solid;
}
</style>
</head>
<body>
<div id="container">
<div class="jander1">jander1</div>
<div class="jander2">jander2</div>
</body>
</html>
Javi
Floating both is simpler, and means that you don't have to be careful if you add more elements next to the first two. Floating just one is more unusual, more often used when you want actual float effects (like text wrapping around the floated element).
As krs1 said, you'll probably want to use some method to clear your floats. The easiest way is to have a containing element (as in your second example), and to apply either overflow: hidden or overflow: auto to it. This can have side effects (if content from the boxes overflows), but does not complicate your markup.
#container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }
First of all, think about your content. The markup of your content should reflect your content; don't let CSS determine the class attributes you use. The nature of that content also affects what CSS you should be using.
Case 1: Different content in the 2 <div> elements
If we're talking about different content between the two <div> elements, such as an image and some text...
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!</div>
... use different classes. The neither is a jander so don't include jargon class attributes to accomodate your CSS. Class attributes are element identifiers and should make semantic sense.
Case 1.1: The Left <div> has a fixed width
Once you get to your CSS, in a case like this one, the image has a fixed width which probably isn't subject to a lot of change; as such you can use technique #2 from your question to give the second <div> a margin-left:
.profile-picture {
width:80px;
height:80px;
float:left;
}
.about-me {
margin-left:81px;
}
Here is a JsFiddle example.
Case 1.2: The Left <div> has a variable width
But what if we need that image to some times be bigger, sometimes be small? What if we don't have knowledge of the image's size when we're writing our CSS?
<div class="profile-picture"><img src="http://media03.linkedin.com/mpr/mpr/shrink_80_80/p/1/000/09a/108/11e3bdd.jpg" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
... one of those images is 128px tall and the other is 80px tall.
We can then float the first <div> while simply targeting the other with anoverflow-x:hidden;`:
.profile-picture {
float:left;
}
.about-me {
overflow-x:hidden;
}
Here is another JsFiddle example.
Case 2: Similar content in the 2 <div> elements
Then by all means give them the same class attributes!
<div>
<div class="column">Here is content for column 1!</div>
<div class="column">Here is content for column 2!</div>
</div>
If they are supposed to behave identically, target them with the same rules and float them both to the left. If they don't behave identically, you can generalize the considerations above; do you know how wide that first <div> should be? If so, go ahead and use the margin-left. Otherwise use overflow-x.
If they work, they work. Option 1 looks good, I've run similar patterns before.
However you're going to run into issues if you attempt to put a block element beneath floating elements. After the second 'jander' class element add this:
<div style="clear:both"></div>
Since both div share styling, I would go with the first example. I would also add a clear:both to your #container since it is wrapping the two divs which are floating left.
Since you have a margin-left in your 2nd div only, I would either use a pseudo-class like #container div:first-child or an id/class to add the margin.
The layout
I really dont have any idea of where to begin to make this with DIVs or with tables specially with the fact that i need a top-backgroud and a botton-background. Please i need orientation with this, if you can make the css with the names i put on the image i will understand the code whitout any explanations. Thanks a lot for any help.
Have look if this is what you were after (TESTED ON SAFARI 5.0)
If yes code is as given below
<html>
<head>
<style type="text/css">
* {margin:0px;padding:0px;border:0px;}
body{background:#e8a7aa;}
#bg-top{height:200px;width:100%;background:#008a2b;display:block;float:left;}
#container{float:left;width:900px;z-index:100;margin-left:150px;margin-top:-700px;}
#header{background:#3d2627;height:180px;}
#content{background:#94101e;height:340px;}
#footer{background:#3d2627;height:180px;}
#bg-bottom{height:200px;width:100%;background:#008a2b;display:block;margin-top:300px;float:left;}
</style>
</head>
<body>
<div id="bg-top"></div>
<div id="bg-bottom"></div>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</head>
Will appreciate any other comments as well, cheers
There are many ways to do this. I'm not a CSS expert but I'll see what I can come up with, probably some one else has a better answer. Assuming you want to fill the entire browser window, I'd start out with three divs.
One for left, one for middle, one for right. You can make them float:left and give width in percentages if you want to fill the window. If you want to center this entire thing, give them absolute widths, put them in a parent div and then center the parent with margin auto
After that, you can just fill the three divs with inner divs. Give them the right widths and heights and they will automatically line up underneath eachother. After that, assign backgrounds to the divs using CSS.
Edit: I forgot to say, there is a clear:left or clear:both style that you can use if after the floating divs, you need to go back to "normal" div behavior
Is this homework? If so, you’re going to need to learn research skills other than “ask Stack Overflow”.
That said:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #dfaaaa;
color: #fff;
font-family: 'Arial', sans-serif;
font-weight: bold;
}
.TOP-Background {
background: url(TOP-background.gif) left top repeat-x;
}
.BOTTOM-Background {
background: url(BOTTOM-background.gif) left bottom repeat-x;);
}
.HEADER,
.Content,
.FOOTER {
width: 900px;
margin: 0 auto;
}
.HEADER,
.FOOTER {
height: 200px;
background-color: #3a2727;
}
.Content {
min-height: 801px;
background-color: #8b1d23;
}
</style>
<title></title>
</head>
<body>
<div class="TOP-Background">
<div class="BOTTOM-Background">
<div class="HEADER">
HEADER: W=900px H=200px
</div>
<div class="Content">
Content: W=900px
</div>
<div class="FOOTER">
FOOTER: W=900px H=200px
</div>
</div>
</div>
</body>
</html>
I've created a design, but I'm having problems to make it work the way I need.
It would be too much to post a complete pack here, but here is the problem in short:
I have a DIV element side by side with another DIV element. One is a sidebar and the other is content.
When I put a fieldset in my content div, anything (like other divs) I put inside stretches fieldset and encapsulating div correctly. But if I remove fieldset, "guest divs" just dont stretch the encapsulating "content div".
Why that happens and how can I fix it?
Thank you!
If you need more info, please ask.
Code is something along these lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
#main-container
{
background-color:gray;
}
#header-container
{
background-color:green;
height: 60px;
}
#sidebar-container
{
background-color:maroon;
width: 150px;
float: left;
}
#content-body
{
background-color:white;
position: relative;
}
#block-1, #block-2
{
float:left;
width: 50%;
background-color: blue;
height: 95px;
}
#block-3
{
float: left;
width: 100%;
background-color:navy;
height: 156px;
}
#footer
{
width: 100%;
background-color:orange;
}
</style>
</head>
<body>
<div id="main-container">
<div id="header-container"></div>
<div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div>
<div id="content-body">
<div id="block-1"> </div>
<div id="block-2"> </div>
<div id="block-3"> </div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
You need to set overflow:hidden on your containing div, and make sure it has at least one dimension that is fluid. By default, overflow elements (i.e. floated elements, anything taken out of normal document flow) 'overflow their containing blocks bounds' (overflow: visible) without affecting their parent container. When you set overflow to hidden, you tell the box model to grow the containing div in any dimensions that are not set to fixed size such that it fully contains its content elements.
Depending on whether you need the content of the containing div to scroll or not, you may want to use overflow: auto or overflow: scroll. The auto setting will display scrollbars if necessary, scroll will always display them. Any browsers that support the CSS3 overflow provide additional capabilities that you can look up on W3C.org.
The first change I would make to your code is the following:
#content-body
{
background-color:white;
position: relative;
overflow: hidden;
}
An alternative method that is preferred these days can be found at the link below. I have not used it myself, so I can't say authoritatively how compatible the method is. However it does seem to be preferred over the overflow fix for modern browsers (Opera, FF 3.x, Safari, Chrome, IE8). For older versions of IE, they automatically expand divs anyway, so your set.
http://www.positioniseverything.net/easyclearing.html
I have a div that contains other floating divs:
<div id="parent">
<div style="float:left;">text</div>
<div style="float:left;">text</div>
<div style="float:right;">text</div>
</div>
How can I add bottom padding to the parent div and make it work in IE6 (or in other words avoid the bugs in IE6)?
Thanks
In my CSS reset file i have a "clearfix" code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}
Looks weird but works great on ALL common browsers : IE6/7, FF2/3, Opera, Safari.
How to use?
Something like this:
<div class="clearfix">
<div class="floatLeft">
left div
</div><!-- /.floatLeft-->
<div class="floatRight">
right div
</div><!-- /.floatRight-->
</div><!-- /.clearfix-->
ATTENTION!
Do NOT use clearfix class on footers (or at last element in page), otherwise you will have an ugly space under all content.
Try floating the parent div.
The box model hack, basically providing IE specific padding should help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>demo</title>
<style type="text/css">
<!--
div {
height:100px;
border:1px solid black;
padding-bottom:10px;
}
div {
\height: 140px;
h\eight: 100px;
}
-->
</style>
</head>
<body>
<div id="parent" style="float:left;">
<div style="float:left;">text</div>
<div style="float:left;height:100px">text</div>
<div style="float:right;">text</div>
</div>
</body>
</html>
IE doesn't seem to calculate the height of the parent when all the children are floated. If you can get away with applying a fixed height to the parent, you'll be able to add bottom padding.
If you can't fix the height of the parent, the next thing I'd do is see if there's a way to remove the float from the tallest child div. That'll give the parent div an actual height, and then the bottom padding should show up.
Similar to one of the other answers, this one worked for me in Firefox, and uses a bit less code. I think it works well in the other browsers as well, but you should confirm.
.clearFix::after{
content: '';
display: block;
clear: both;
}