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>
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've currently got this situation - two divs where the 1st is fixed on the left and the 2nd is fluid on the right. I need to switch the HTML position of the two divs, but leave the webpage appearance unchanged.
So,
<div id="fixed"></div>
<div id="fluid"></div>
needs to become:
<div id="fluid"></div>
<div id="fixed"></div>
But when the webpage is displayed, the fluid div needs to be on the right and the fixed on the left. I can't figure this out. Is there a way to do this?
There are various ways to do this. It's best to have both divs inside a container, even if set to width: 100%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
width: 300px;
height: 100px;
background: #111;
position: absolute;
top: 0; left: 0;
}
#fluid
{
height: 100px;
background: #555;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="container">
<div id="fluid"></div>
<div id="fixed"></div>
</div>
</body>
</html>
A modern option is to use flexbox, but it's not reliably supported yet.
Add float: right to #fixed-div.
If you have markup like this:
<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>
and css like this:
.inlineblock{ display: inline-block; }
You will get spaces between the elements. about 4px of space. unless your markup looks like this:
<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>
Now, what i would like to know is WHY?
What is the technical reason that "good" browsers still do this, even the latest Firefox, Chrome, and Opera at the time of this posting still do this. I assume there is a technical reason behind it, otherwise it would have been fixed by now?
Thanks!
This is exactly what they should do.
Spaces between inline elements are no different from spaces between words.
If you don't want that, use block elements, or set the font size to zero.
Well, there are spaces between them!
For a fix, try using font-size: 0 in the parent element.
There's a better way of removing the white space than setting font size to zero (as that method has unpleasant side effects). You can word-spacing instead:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
section {
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
display:table;/* Webkit Fix */
}
div {
width: 100px;
height: 40px;
background: #e7e7e7;
padding: 10px;
display:inline-block;
word-spacing:0; /* reset from parent*/
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>three</div>
</section>
</body>
</html>
This is The solution.
<style>
* {
border:0;
margin:0;
padding:0;
box-shadow:0 0 1px 0px silver;
}
.foo {
width: 100%;
}
.bar {
width: 50%;
float:left;
text-align: center;
}
</style>
<div class="foo">
<div class="bar">
...a new customer
<!-- the whitespace between the following divs affects rendering - why? -->
</div> <div class="bar">
...an existing customer
</div>
</div>
I've got a left floated div with 2 rows of left floated child blocks. Each row is cleared with a simple clear block.
Problem is that IE6 expands parent block's width to 100% of available space while in other browsers parent's width is set to exactly wrap the children.
When all child blocks are floated, the width is correct in IE6. But I need children blocks to be arranged in rows, so I put an additional clear block after each row. After that parent's width expands to 100%.
Is there a workaround to have normal parent's block width in IE6? (tables are not welcome)
Have a look at the image illustrating the problem
<!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" lang="en" xml:lang="en">
<head>
<style type='text/css'>
#parent {
float: left;
background-color: black;
}
.block {
width: 30px;
height: 30px;
background-color: yellow;
margin: 10px;
float: left;
}
.clear {
height: 1px;
clear: both;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="parent">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="clear"></div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="clear"></div>
</div>
</body>
I don't have access to IE6, so I can't actually check this. But you could try the following:
http://jsfiddle.net/YA7CN/
(putting the blocks in a container with clear:both)
As I said, it might give you the same problem... but it's an option.
By the way, are you designing for a specific public that uses ie6? If not, I wouldn't be too worried about things looking different in it, you will get mad adapting everything to a version that crashes everything it touches!
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.