|
CSS - Layout Question With Z-index, Img Included
I have attached an image that encapsulates ideally how I would like the page to look.
I'm having troulbe having left nav, body text lining up. Basically I want the background of the center box to be white, but the wrapper is not "clearing" all the divs in the center box. So the bg appears black. I would also like the body color and left nav color to ALWAYS line up at the bottom. However they need to be able to strecth when content grows. Any help would be greatly appreciated! I'm pretty new to CSS and love it, but this has really got me stumped. View how I would "like" it to look http://urbaneffect.com/test/layers_image.gif View Page here http://urbaneffect.com/test/ CSS FILE Code:
/* this centers the content*/
#wrapper{
width: 765px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
background-color:#FFFFFF;
}
#headerBlock{
z-index:2;
position:absolute;
top:0px;
margin-left:15px;
}
#bodyBlock{
position:absolute;
top:70px;
}
#leftNav{
width: 182px;
float: left;
height: 300px;
margin-right: 10px;
background-color:#666666
}
#innerContent {
float: left;
padding-left: 12px;
padding-top: 20px;
background-color:#FFCCCC;
width:550px;
}
Similar TutorialsI'm aware of what z-index does and that it can only work on positioned elements. My question is this: for z-index to work properly does a position also need to be set for the element that will be below the element with a higher z-index? I'm building a simple gallery site for my old man, who wants a place to upload his artwork. I've made all the slices in ImageReady for the images around the edge of the screen, and customised the code so that they fit to any resolution. I'm having a problem with the DIV tag that I would like to contain the main section of the site. I would like it to fit the gap in the middle - whatever size that may be - so it can scroll if necessary later on. As it is though, it just wraps around whatever content I put there. Here's the stylesheet code for that particular DIV: Code:
#vg-09 {
position:absolute;
margin-top:183px;
margin-left:49px;
margin-right:56px;
margin-bottom:97px;
background-image: url(images/vg_09.gif);
}
I thought those margins would make it meet the surrounding images, but it doesnt work. I've also tried setting the height and width to 100%, but then it extends beyond the size of the screen and looks ugly after scrolling. Here's the Page: http://vic.retina-designs.com Does anyone know how I can get that DIV layer to sit flush against all the surrounding images? Thanks for any help! EDIT: Added the link hi at my workplace they have asked me to create a simple html page which will be used as a small widget in a website. as per the requirement in the html file. i should not use an external stylesheet and also no embedded style however i should write the page completely using inline css. all this is fine. however my question and issue i am facing is with adjusting height as the content increasing when i give for example margin or padding. please check out this link where i have created an image of what i am creating as html page using inline css. http://www.sudhakargolakaram.co.in/form.html as per the image there is an outer div which has the light blue background color which i have created like a container div with the background color the dark blue rectangles are 3 images and the white color on the right with the rounded rectangle at the top and bottom is where content like header tag, img tag, forms etc will be used. lets say for example i divide the images and content as 2 divs floating left with images div as 100px and content on the right as 300px width so a total of 400px and a total height of 300px based on the design that i have the total width is 400px (left div with images=100px and right div with content=400px) and total height is 300px for example. i am ok with the left div as the images have a fixed width and height, the problem i am facing with is the content div. as the content div contains header tags, a small paragraph information within p tag, a small form with about 2 to 3 form fields, in order to add all these elements as per the design i am using padding top, padding bottom and if needed margin top and margin bottom. so due to this the content may go beyond the bottom div which has the rounded rectangle at the bottom, and this is not how it should appear the entire content should sit inside the 300px height in the right div so do i have to keep subtracting the amount of padding and margin i am using from the height value of the right div so that the content sits inside within the total 300px height. how do i go about this height aspect which i am having issue with and also is there something specific that i have to keep in mind for ie6 browser. for the left and right div do i have to use #left{ float: left; width: 100px; height: auto; } #right{ float: left; width: 300px; height: auto; } or do i have to specify the fixed height which is 300px for #left and #right divs also in the #right div i am using 3 inner divs 1 for top rounded rectangle background = { background: url(topbg.jpg no-repeat; width:300px; height: 10px; } 2nd div with white background color no background image= do i have to specify a fixed height for this 2nd div = { width:300px; height: ; } 3rd for bottom rounded rectangle background image = { background: url(bottombg.jpg no-repeat; width:300px; height: 10px; } any help will be greatly appreciated. thanks. 'ello question, right.. a table sumthing like dis.. <table style="width: 100%"> <tr> <td style="width: 200px;"></td> <td></td> </tr> </table> gives ya a nice two column layout, where the first has a fixed width, and the second column fill the rest of the parent container. Also, heres the kicker.. when u get loads of content in the second column, and it get extended vertically, the second container is as well.. and thats nice and all.. So, question.. how do i do this with divisions and CSS? i tried a ton of different stuff, and the closest thing i came was using height: 100% and like, scrollbars in the second column. But i dont really want that.. I think like, min-height is the solution, but a cant tame it, when i start using it.. things goes weird :P the table model works, but i really want to lean to do this "right" so, lill' help please? cheers, So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! Code:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png Hello all. I have implemented a sort of 3 column layout on part of a site I'm working on: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#content {
line-height: 130%;
padding: 1em;
clear: both; } /* end #content */
#column_1 {
padding-left: 1em;
padding-right: 1em;
float: left;
background: red;
width: 33%; } /* end #column_1 */
#column_2 {
margin-left: 36%;
background: green;
padding-left: 1em;
padding-right: 1em;
width: 25%; } /* end #column_2 */
#column_3 {
float: right;
background: blue;
padding-left: 1em;
padding-right: 1em;
width: 33%; } /* end #column_3 */
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden; } /* end .clearfix:after */
.clearfix {display: block;}
/* Hides from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE5/Mac */
</style>
</head>
<body>
<div id="content">
<div class="clearfix">
<div id="column_1">
<p>Column 1</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div id="column_3">
<p>Column 3</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
<p>Line 6</p>
<p>Line 7</p>
</div>
<div id="column_2">
<p>Column 2</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
</div>
</div>
</body>
</html>
In FireFox and Safari, the colors line up but the text does not and in Opera the text lines up but the color does not. There's a rendering problem with IE that I will address later. The solution I would like to achieve would be to have the text and the colors lining up. What would be the best way to achieve this? I have a layout question for which I will reference Dan Cederholm's site, http://www.simplebits.com. He has a two column layout, div#content on the left and div#sidebar on the right, both are contained by div#main-body. #content is floated to the left and #sidebar is floated to the right. How is he #main-body to extend the entire length of the page without containing some normal flow elements? I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! Hello All, I've had great luck with this site helping out in the past. My main question I want to ask today is just to see if others think that I have layed out this page as efficiently, and as easy to work with cross-platform as I can. Because I'm having problems with IE on XP looking good with it, whereas it looks good on Mac. If you have suggestions of how to lay things out differently, I'd really appreciate it. Here's the site: http://www.genius-creative.com/index2.html Here's the attached CSS: http://www.genius-creative.com/geniusall.css Thanks a million! -Brandon I'm working on www.wirelessguy.net and I'm trying to add something to my layout. I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color. I'm currently using 10% left/right margins to get the material in the middle of the page. Here is my css for the outerbox: Code:
div#outerBox
{
margin-left:-5%;
margin-right:-5%;
border-left: 1px dotted red;
border-right: 1px dotted red;
width:100%;
height:100%;
}
When I do this I get the following result: www.wirelessguy.net/index2.php Any ideas on how to get the box to be made with negative margins? I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right. Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width. I tried the following: Code: <div style="background-color: red; float: left;">content area text</div> <div style="background-color: blue; width: 200px; float: right;">sidebar text</div> When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line. Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page. Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this. Hello on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use. http://matthewjamestaylor.com/blog/perfect-3-column.htm The column layout is 2,1,3 (center page comes first in the html code). He states "The columns can also be configured to any other order if required." How to do the column configured as 1,2,3? (left, middle, right)? Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! Hi all, I have a problem with a website I am trying to build. The website is designed to be in three colums with the centre one containing the site content. Both the left and right column contain only a background image that provides the site good aesthetics. Below are links to diagrams of both how the site is currently displayed, and how i would like it to be displayed; http :// securetransaction .co .uk /orangepi /images /2.jpg http :// securetransaction .co .uk /orangepi /images /1.jpg Any help would be greatly apreciated, i can provide the current code if necessary. Cheers Good Day All, I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all. http://029c92a.netsolhost.com/abrasives/cutmetalm.html Colin Hi all, I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest? I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix). Thanks very much for any pointers. Hi, I have made myself some ugly css code (just got started so this is my first try) that gives me a floating sidebar on my right side. This sort of works for IE6 (that most of my friends use) and I don't even dare to think about the look of it in another browser... So I would greatly appreciate some advice regarding improvements of the following code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
@media screen {
html {overflow:hidden;}
body {height:100%; overflow:auto; margin:0; padding:0; color: white;
background-color: #333;}
#container {position:fixed; margin-top:30px; margin-right:auto;
margin-bottom:30px; margin-left:auto; width: 1000px;
padding:10px; background-color: black; border: 1px solid
white;}
#header {position:fixed; margin-top: 0px; margin-right: 99px;
margin-bottom: 10px; margin-left: 99px; height:60px;
padding:0px; background-color:red; border: 1px solid white;}
#sidebar {position:relative; width:178px; height:150px; left:10px;
top:0px; padding:5px; background-color:blue; border: 1px
solid white;}
#intro {float:left; margin-top: 0px; margin-right: 0px; margin-bottom:
0px; margin-left: 0px; height:150px; width:788px; padding:5px;
background-color:green; border: 1px solid white;}
#content {margin-top: 10px; margin-right: 200px; margin-bottom: 10px;
margin-left: 0px; padding:5px; background-color:green; border:
1px solid white;}
#navbar {margin-top: 0px; margin-right: 99px; margin-bottom: 0px;
margin-left: 99px; height:75px; padding:0px; background-color:
red; border: 1px solid white;}
}
//-->
</style>
</head>
<body>
<div id="container">
<div id="header">A NICE HEADER</div>
<div id="intro">A USEFUL AREA FOR SECTION INTRODUCTION </div>
<div id="sidebar">TEST1<br>TEST2<br>TEST3</div>
<div id="content"><b>lot's of nasty things...</b>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="navbar">MY GLORIOUS NAVIGATION BAR</div>
</div>
</body>
regards /twinkle I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet. I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks! Code: <link rel="stylesheet" type="text/css" href="style.css" /> Hi, I'm wondering if it is possible to override style settings in an external html document. I'm using the <--#include file command to include a html file. I don't want to modify the html file, because people (here at work) are making documents in word9 and save it to html. The major problem is that the <hr> line is too long and so is the text, so it don't fit on our website, at this point these documents are opened in a new window, but it would be nicer to intergrate them into our site. thanks -Dan Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none... If everything is square in the top-left corner there is _NO_ problem, everything looks fine. However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place? Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer? |
|||||||