|
CSS - Trouble Placing Data In Columns
I have a page that I am generating that I would like to have the images (in a box) placed in 3 columns. I generate the code via a simple php script but it only creates a single column. I have a #pagePane selector around a #bodyPane selector and have a number of selectors of the form #appDivXY where X and Y are the column and row I want to put them in.
#pagePane { width : 800px; position : relative; table-layout : fixed; text-align : center; margin-left : auto; margin-right : auto; } #bodyPane { width : 800px; position : inherit; margin : 5% auto; } and a series like the following: #apDiv00 { position : absolute; width : 250px; height : 250px; top : 100px; left : 25px; border : thin; border-color : #000000; border-style : solid; } #apDiv10 { position : absolute; width : 250px; height : 250px; top : 100px; left : 275px; border : thin; border-color : #000000; border-style : solid; } I have validated the code and only get some minor warnings about colors. The full page can be generated at mandp dot lamster dot org slash french40sx.php I am sure (or I hope anyway) that I am doing something trivialy wrong but I have no idea what it could be. I have been playing with this for hours. Thanks for any help. Hal Similar TutorialsI am having trouble with placing an image on my page and having that image repeat itself all the way down the page. Code: <div id=left> ........ content ...</div> <div id="image">this is where i want the image</div> <div id="content">content here</div> Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code Code:
#left {
position: absolute;
left: 0px;
width: 215px;
background-color: #efefef;
border: 1px dotted #ccc;
}
#image1 {
background-image: url("http://mydomain.com/image.jpg")
background-repeat: repeat-y;
width: 15px;
margin-left: 215px;
}
#center {
margin-left: 260px;
margin-right: 0px;
overflow: hidden;
}
The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page Cheers UPDATED! - please see my post below Hi all, A bit of a newbie to CSS. I understand the syntax, and some basics. I've run into an issue where I need to render tabular data (from coldfusion) as columns rather than rows. That is to say - the data coming from CF is sorted to be written out one column at a time, rather than one row at a time, and still be lnied up correctly. Is there an easy way to set this up using CSS? I even have rowspan info, just not sure how to implement this. Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg How does one go about placing an image in a paragraph in CSS? I cannot seem to complete this. doug I have a scrolling DIV and a button which when clicked gives the user the option to insert another such DIV below the existing one. How can I position a new DIV directly below another regardless of the length or height of the first DIV. How would margins play a role? I know this is probably the most asked question here, but I've been playing with it for a while and ... Anyway, this is my page This is my CSS Code: body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}
div.container {
width:750px;
margin:auto;
}
div.logo {
float:left;
text-align:center;
width:138px;
height:138px;
}
div.header {
height:65px;
border:1px solid blue;
line-height:50%
}
div.picbar {
height:65px;
border:1px solid red;
line-height:50%;
}
/* The following code creates the navigation items */
#navbar {
clear:left;
float:left;
width:auto;
padding:0;
vertical-align:middle;
}
#navbar li{
margin:2px; /*dictates the space between navbar items */
padding-right:0.5em;
width:120px;
float:left;
text-align:center;
}
#navcol {
clear:left;
float:left;
width: 125px;
padding: 0;
margin: 10px 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
color: #99CCFF;
}
#navcol ul, #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navcol li {
border-bottom:1px solid #003366;
margin:0; /*dictates the space between navbar items */
}
#navcol li a, #navbar li a {
display: block; /* enables the entire link box to be clickable */
padding: 5px 0 5px 5px;
border-left: 10px solid #003366;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navcol li a:hover, #navbar li a:hover {
border-left: 10px solid #99CCFF;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
div.intro{
margin-left:145px;
position:relative;
padding-top:1px;
font-family:Verdana,Lucida;
font-size:12px;
line-height:150%;
}
div.google{
float:right;
margin-top:10px;
width:305px;
height:255px;
padding:0 0 5px 10px
}
div.footer {
margin-top:50px;
width:750px;
word-spacing:100px;
text-align:center;
float:center;
height:20px;
background-color:#1c64d1
}
div.copyright {
width:750px;
text-align:center;
float:center;
height:20px;
}
a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }
h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}
What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..." Thanks for your time i want to place images: top right, middle right, bottom left, these images should float above any other images or content that is on the page, the must also stay in there positions when the browser is resized. I'm still new to css so can any body help me pls I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially. Here are some sites that fit well on a small screen. What can I do to fix this? http://www.beakable.com/ http://www.gazelletouch.com/ http://www.gummisig.com/ My web site: http://markallen.us Sorry folks, css novice here. But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this? Code: <html>
<head>
<title></title>
<style>
.greenBorder {border: 1px solid green;}
.redBorder {border: 1px solid red;}
</style>
</head>
<body>
<div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
<div class="greenBorder" style=" #position: relative; #top: -50%; " >
stuff
</div>
</div>
</body>
</html>
what am I doing wrong? recommend any good css books? Hey everyone I'm a beginner at CSS. I'm trying to place divisions exactly where I want, but when I attempt to overlap them it doesn't render the way I intend it to (inconsistent in different browsers as well.) Does anyone have any tips? 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=iso-8859-1" />
<?php
//variables
//title
$title_ = "Title";
?>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#myhr {
width: 90%;
}
body {
padding: 15px 0px 15px 0px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width: 904px;
background-color:#CCCC66;
}
#container {
padding:
float: left;
width: 898px;
height: 900px;
background-color:#999999;
border: solid rgb(250,0,255);
border-width: 2px 2px 2px 2px
}
#link1{
margin: 0px 0px 0px 0px;
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
margin: 0px 0px 0px 0px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:2;
}
#innerbox{
width:136px;
height:177px;
margin: 0px 0px 0px 68px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox2{
width:136px;
height:177px;
margin: -182px 0px 0px 275px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox3{
width:136px;
height:177px;
margin: -182px 0px 0px 482px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox4{
width:136px;
height:177px;
margin: -260px 0px 0px 689px;
z-index:1;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
</style>
<title><? echo $title_; ?></title>
</head>
<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>
Well, it's been an extremely long night. I've been trying to get this bottom bar element working for at least a couple nights now, and I feel so very close. I've been trying to use footerStickAlt, which would allow me to put this baby down on the bottom of my page and would not overlap or screw up the scrolling when installed. However, as you might be able to tell from my website, http://www.brianmooremedia.com, it's not working too well. Here is my CSS: http://www.brianmooremedia.com/style.css If anybody can help me make this red bar stop and stay down once the window size has gotten smaller than it, please let me know! Thanks a ton, Brian Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working. html is... <span class="yellowbox"> <form name="view constituent" method="post" action="constituents_viewm.php"> <input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span> and css is... .yellowbox { background-color:#fdffe3; margin:10px; padding:10px; border: 1px #000; font-size:13px; width:420px; height:100px; } .link_submit { color:#116500; font-size:17px; font-family:Calibri, Arial, Helvetica, sans-serif; background:none; border:none; display:block; text-decoration:underline; cursorointer; float:left; } any help will be greatly appreciated. I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated. 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>
<style type="text/css">
body
{ text-align: center;
min-width: 1044px;
margin: 0px;
padding: 0px;
font-family: arial;
}
#wrapper
{ position: relative;
text-align: left;
width: 1044px;
height: 100%;
margin: 0px auto;
}
#top-header-block
{ width: 1010px;
height: 170px;
background-color: cyan;
}
#top-header-block img
{ height: auto;
width: auto;
}
#logo
{ float: left;
}
/*------------------------------------------*/
#inner-div
{ height: auto;
width: auto;
position: absolute;
left: 567px;
top: 41px;
}
#inner-div img
{ float: left;
}
#inner-div p
{ float: left;
margin-top: 3px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------Alternative to above-------------*/
#img-B
{ float: left;
margin-left: 315px;
margin-top: 40px;
}
#top-header-block p
{ float: left;
margin-top: 43px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------------------------------------*/
</style>
</head>
<body>
<div id="wrapper">
<div id="top-header-block">
<a href="#">
<img id="logo" src=""
alt="" width="248" height="65"/></a>
<div id="inner-div">
<a href="#">
<img src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
</div>
<!-------------Alternative to above-------------------------------->
<a href="#">
<img id="img-B" src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
<!----------------------------------------------------------------------->
</div>
</div>
</body>
</html>
OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page. The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it. My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot. edit: apparently I can't post images but here is a link to the image http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif here is my css pertaining to the section Code:
.result_image { float: left; display: block; }
.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }
.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}
I would like the text to stay 80px from the left of the box always.....regardless of what size the image is. I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect. I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin. The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined... but here it is for reference Code: <div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> <div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage. How do I do this please? Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html CSS: http [colon] // lovelago.googlepages [dot] com/main.css Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need. Thanks to anybody! note to admin: I'm not a spammer, thanks. Hi, Is there a relatively simple way to place an image over the main background of a site, on the right of the main design? For example, see how the Keller Williams logo is on the right, over the background he http://www.groundedgroup.com/client...Interface3.html Ideally, I want to make it happen he http://www.groundedgroup.com/clients/NWR/ It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas? Thanks. Is there a way to define a text style where a dash and a space is automatically inserted after the text? If I want this: Subtitle and then content To look like this: Subtitle - and then content How can I do that? Thanks Well the title pretty much says it. How can I remove the little border from the top of the flash movie player (see example here : http://www.aplistia.com/flashin.htm ) if you see carefully, you will see a natural separation of around 4 - 6 pixels tall. I want to completely put my flash file on top, no spaces. Ive tried a couple of things but I couldnt fix it. Thanks in advanced . |
|||||||