|
CSS - Newbie - Help With Positioning Please
Hi all,
I was hoping someone can help me with some trouble I've been having lately. If you could please take a look at http://webfyn.com What I'm trying to achieve is: 'div-top-left'(grey) to remain at the top left as it is. 'div-bottom-left'(purple) to be lined with the bottom of 'div-top-right' (pink), and move with the bottom of div-top-right as the text expands. All three divs must remain with in the wrapper (yellow). any help will be most appreciated. Code: <html>
<head>
<title>Positioning</title>
</head>
<body>
<style type="text/css">
body {
}
#div-wrapper {
margin-left:auto;
margin-right:auto;
background-color:#FF9;
position:relative;
height:800px;
width:800px;
}
#div-top-left {
background-color:#999;
position:absolute;
top:0px;
left:0px;
height:200px;
width:200px;
}
#div-bottom-left {
background-color:#C9F;
position:absolute;
bottom:0px;
left:0px;
height:200px;
width:200px;
}
#div-top-right {
background-color:#FCF;
position:absolute;
top:0px;
right:0px;
width:600px;
}
</style>
<div id="div-wrapper">
<div id="div-top-left"><h3>div-top-left</h3></div>
<div id="div-bottom-left"><h3>div-bottom-left</h3></div>
<div id="div-top-right"><h3>div-top-right</h3><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body></html>
Similar TutorialsHi everyone- I'm a rank beginner at CSS and am trying to figure out the whole positioning thing -- you know, the stuff that was generally a no-brainer using tables back in the day. :-) For learning purposes, I'm trying to do this with only CSS and no tables. So, here's my problem. I'm creating a simple two-row layout. The first row contains two columns, and the second/bottom row contains only one. I'm trying to make sure the bottom row always remains below the longest of the two columns in the row above it. With the code below, I can cut text from the left column and the bottom row maintains position. If I cut from the right, however, the bottom row moves up and is partially hidden under the left column. I've tried using both absolute and relative positioning for the bottomRow DIV, but no luck. I'm sure this is probably something simple that I'm just not getting. Any thoughts? Thanks in advance... - Tom Tedeschi Code:
<style type="text/css" title="theStyle" media="screen">
/* <![CDATA[ */
#leftCol {
background: #c0c0c0;
position: absolute;
top: 1px;
width: 250px;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
#centerCol {
background: #f7f7f7;
position: relative;
top: 1px;
left: 250px;
width: 250px;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
#bottomRow {
background: #929292;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
/* ]]> */
</style>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div id="bigBox">
<div id="topRow">
<div id="leftCol">
<b>TopRow/LEFTCOL here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
<div id="centerCol">
<b>TopRow/CENTERCOL here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
</div>
<div id="bottomRow">
<b>BottomRow here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
</div>
</body>
</html>
Hello and thanks for your patience. I have a page here that is having a positioning problem for "sidebar2". I can't seem to get it to stick to that right side of the page in a fixed position. Code: @charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #32240C;
line-height: 1.5em;
}
a:link {
color:#C42617;
}
a:hover {
color: #687ABB;
}
a:visited {
color:#C42617;
}
a:active {
color: #687ABB;
}
h2 {
font-size: 1.2em;
line-height: 2.3em;
color: #34260b;
border-left-width: thin;
border-left-style: double;
border-left-color: #34260b;
text-indent: 10px;
background-repeat: no-repeat;
}
#clear {
clear: both;
}
#welcome {
color: #325084;
float: left;
width: 590px;
text-align: left;
padding: 15px;
border: thin solid #D0DAEF;
background-color: #FFF;
margin-left: 25px;
margin-right: 5px;
}
#welcome h2 {
padding-left: 2px;
}
#welcome p {
padding-left: 2px;
}
input {
width: 185px;
}
/* reset width for non-text inputs */
input.radio, input.checkbox, input.submit, input.dropdown {
width:auto;
}
/* display labels next to form elements add a class for when you want them to stack */
label {
float: left;
margin-right: 1em;
}
label.top {
display: block;
float: none;
}
.sidebar2 {
position:absolute;
top:182px;
right: 150px;
text-align:left;
width: 255px;
padding-top: 0px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0px;
}
.sidebarheader {
color:#D75500;
padding-bottom: 5px;
font-weight: bold;
font-style: italic;
font-size: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/*- Menu 3--------------------------- */
#menu3 {
width: 250px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 12px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #325084;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#affiliates {
color: #325084;
float: left;
width: 580px;
text-align: left;
margin-left: 25px;
margin-right: 15px;
}
#affiliates table td {
padding: 15px;
}
Can you tell me how format that div? I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo HELP !! The header to my website is designed in css with <div> tags and some times the whole background does not load....any thoughts? Also I am considering the possibility that my header should not call to my stlye.css file, but that the header should be a table with the table having it own style...any thoughts on this would be really appreciated thank you sean (URL address blocked: See forum rules) is my site So I'm taking the jump from Tables to Div layouts for non-record elements like I'm "supposed" to. Just for starters, I'm finding it much more complicated than tables would have ever been, and there are a number of cross-browser problems that would have never happened, but I won't get into a rant about it here. So, instead, a simple question. I have some nested Divs I'm setting up like I would a nested table. But I'm finding that some DIVs are actually "poking out" of the original DIV. I didn't even know this was possible w/o some sort of positioning. Can anyone tell me what I'm doing wrong he http://www.poweredpages.com/cityrecovery/index.php I'm trying to keep that red bar inside the top DIV, which contains a gray background (and a red border to help you see where the outermost DIV lies). Thanks, Jeremy Hello, i am creating a website in dreamweaver and have created a custom css navigation bar online. can anyone help me get the navigation bar on to my dreamweaver website? i have the css files and everything for the navigation bar i just can't work out how to insert it into my design. please help as i have a deadline looming :/ thanks for your time sam marriott Hey folks, I have a question. I'm trying to get a site 100% CSS compliant through W3C. But I'm facing a few problems. Of course I had the site looking just the way I like it (but then had to change stuff to make it compliant and thats when the fun begins!). I was wondering if you could have a look and see why this panel isn't floating to the right like I have told it to! three60design.com/sky_site/home.htm This is my first full CSS website and want it to be just perfect for going for jobs and would REALLY REALLY appreciate any help..... Gerry Hi, I want to display some products on a web page. Anyone know how I can display the products (image & text) in a nice looking box? Thanks CF I'm a design student trying to make an online portfolio and honestly I don't know much about CSS and I've hit a bit of a snag. I've been goofing around in Dreamweaver trying to get the CSS containers to do what I want but I just can't seem to get it. URL Basically, I'd like a two columns both aligned at the bottom of the browser. The right column would be centered and the left column would be aligned to the left of it. The left column would be a menu column and would be fixed and shouldn't scroll. Here's the CSS code: Please don't laugh Code: .container { height: 80%; width: 700px; margin-left: auto; margin-right: auto; background-color:#06F; padding: 10px; position: relative; overflow: visible; bottom: 0pc; } .menu { height: 80%; width: 300px; padding-top: 25px; padding-right: 25px; position: fixed; left: auto; bottom: 0px; background-color: #F00; }
Sorry for being such a newbie, the code is nothing like what I wanted. If someone could please lend me a hand, I would gladly appreciate it Ok, first and foremost I am a complete noob when it comes to CSS. I am currently attempting to build my FIRST website. After reading countless tutorials and guides, i decided to lay my site out in a combination of CSS + html as opposed to starting bad habits early and doing the layout in tables. Before I get to my two questions, let me give you the layout info followed by the questions , then I will provide the coding. Layout = 3 column , 6box ( 1 header,footer,content,left+right sidebar, and 1 horizontial Nav bar) , fixed layout using absolute positioning. Problem 1: Firefox renders the horizontial navigation bar incorrectly. It appears to have some kind of problem displaying an inline list. Everything appears fine in IE6. Problem 2: When trying to add bordrers to my boxes, they aren't displaying properly. Some are covered because my other boxes are covering them. I can however get around most of this by taking into account the 1px border for for the boxes and resizing them minus the total pixels needed for the borders. My main problem is the left and right borders, its like there is no margin for adding them because the container <DIV> that all my content is in will not expand with the total width of the content. I tried changing the width of the container , but that isn't working at all. Even with the width change it appears that my content is alligned to the left inside the container no matter what. Here is the HTML and CSS coding. The website in question is http://www.brandonsasylum.com Here is the HTML + CSS <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Brandon's Asylum | http://www.BrandonsAsylum.com |</title> <link href="mystyle.css" rel="stylesheet" type="text/css"> </head> <body background="img/wpbackground.gif"> <div id="container"> <div id="banner"> <div id="horznav"><ul id="navlist"> <li id="active"><a href="http://www.brandonsAsylum.com/index" id="current">Home</a></li> <li><a href="http://www.brandonsasylum.com/news">News</a></li> <li><a href="http://www.brandonsasylum.com/forum/index.php">Forums</a></li> <li><a href="http://www.brandonsasylum.com/gallery">Gallery</a></li> <li><a href="http://www.brandonsasylum.com/downloads">Downloads</a></li> <li><a href="http://www.brandonsasylum.com/links">Links</a></li> </ul> </div> <div id="leftsidebar"></div> <div id="rightsidebar"></div> <div id="maincontent"></div> <div id="footer"></div> </div> </div> </body> </html> and the CSS body { text-align: center; } #banner { background-image:url(img/Banner.jpg); position: absolute; top: 0px; width: 900px; height: 120px; } #horznav { background-color: #680000; position: absolute; left: 0; top: 120px; width: 900px; height: 20px; border-top: 1px solid black; border-bottom: 1px solid black; } #leftsidebar { background: #373737; position: absolute; top: 142px; width: 120px; height: 1500px; left: 0px; border-right: 1px solid black; } #rightsidebar { background: #373737; position: absolute; top: 142px; left: 780px; width: 120px; height: 1500px; } #maincontent { background: #373737; position: absolute; top: 142px; left: 121px; width: 658px; height: 1500px; border-right: 1px solid black; } #footer { background: #373737; position: absolute; top: 1642px; width: 900px; left: 0; height: 100px; border-top: 1px solid black; } #container { width: 900px; margin: 0 auto; text-align: left; height: 100%; top: 50px; } /*End of Layout Code*/ #horznav ul { padding-left: 0; margin-left: 0; background-color: #6800; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; } #horznav ul li { display: inline; } #horznav ul li a { padding: 0em 1em; background-color: #680000; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; } #horznav ul li a:hover { background-color: #369; color: #fff; } Thanks for you help in advance. Hi! I am trying to figure out what the issue is with a website I'm helping a friend on. Aveasalons.com is using CSS for the navigation and for some reason the buttons are switching around (not laying as intended) when viewed in Windows. The site was created on a Mac and views fine that way. Any suggestions?? Your assistance is greatly appreciated! Hi I'm looking for help with creating a couple of things for the updated web site that I plan to use for a "relaunch" soon. The site is based on phpBB3 and Coppermine Gallery 1.5. I want both halves of the site (the pictures in the gallery and the written info in the Forum) which have two different ways to go about "styling", to end up looking the same. Although I'm not at all skilled, and much of what I do is trial and error, I'm making good progress with the editing of the PHPBB3 theme, but I'm having problems with the Copppermine Gallery theme. I've tried getting help from the Coppermine forum, but it is a little "abrupt" and not the friendliest of environments, so I was hoping that this might be a little more "newbiwe friendly" If there is anyone prepared to help out a willing learner on a couple of issues that I have, then I'd be very grateful. I'd be pleased if anyone willing would make themselves known. Thanks in advance. Martin This is a very simple table for my top navigation bar, 3 columns, 1 row, but I can't get it to work right with css. <table width=100%> <tr> <td width=100><img src=logo.gif></td> <td width=100% valign=middle align=right>long list of links that I want to wrap based on browser width</td> <td width=100 valign=middle align=right>login/user links</td> </tr> </table> This is pretty much exactly like the gmail top navigation, with an image on the left. Thanks! hi there i am quite new to css and i would appreciate your help. i would like to make the following thing : my gallery contains 10 images (600/400 pixel) i would like to make one single page that shows only one photo at a time and has (text or icon) links to the other 9 images ... of course it would be nice to have some minimalistic transition effect between the images too but if its too much for you i am mainly interested in the functionality part if this (as so many things) has been made as a tutorial i will be glad to get a link too thanks zs Edited I want to make a seperate component with style sheets associated with it so I can change the look in the future. My intended goal is something that will look like a two column table with the contents of each column being aligned to the right, and left, respectively so they nearly meet in the middle. Text: SelectDropDown Text: AnotherDropDown More Text: AnotherDropDown Kind of like that, where the colons should be matching up, and the drop downs should begin at the same place. What would the div/span structure look like? For example if I want the component to be 400 pixels wide, and the two columns meet at the center. Thanks in advance. when I look at this page in browser labs beautybylouise(dot)pleinaircreative(dot)com the top "hair image" disappears miles off to the right and takes the head div with it? any suggestions? I cant seem to work out the problem... |
|||||||