|
CSS - Multiple Images In Parent <div>
I want to create a rule which specifies a container, then allows a number of images to be displayed within that container at defined positions (top-left, top-right, bottom-left, bottom-right)
I also want any text placed in the div to wrap around all the images. here's how far I've got - I've got the images where I want 'em - but the text won't flow around the absolutely positioned elements... I need the bottom elements to be positioned relative to the BOTTOM of the div as its size will change relative to the length of the text displayed within it... css code: #content { background-color: #99CCFF; position: relative; width: 400px; left: 100px; top: 100px; font-family: Arial, Helvetica, sans-serif; font-size: small; overflow: hidden; } #content .imgtopleft { top: 0px; float: left; padding: 5px; } #content .imgtopright { top: 0px; float: right; padding: 5px; } #content .imgbottomleft { position:absolute; bottom: 0px; left:0px; float: left; padding: 5px; } #content .imgbottomright { position:absolute; bottom: 0px; right:0px; float: right; padding: 5px; } HTML: <div id="content"> <img src="images/emsmall.gif" class="imgtopleft"> <img src="images/emsmall.gif" class="imgtopright"> <img src="images/emsmall.gif" class="imgbottomleft"> <img src="images/emsmall.gif" class="imgbottomright"> Lorem ipsum... </div> Similar TutorialsHi, I have 12 thumbnails, and I want a horizontal scrollbar in the div for the thumbnails Here's the HTML: Code: <table bordercolor="333333" border="1" cellpadding="8"> <th valign="center"> <p class="productText"> MEET THE PHERMONES</p> </th> <tr><td height="75" id="productImages"> <a href="#"><img src="images/products/thumbs/prod1T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod2T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod3T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a> </td> </tr> <tr> <td height="138"><p class="productText">THIS IS A TEXT BOX. WHEN THE USER CLICKS ON ONE <br /> OF THE ABOVE IMAGES, THIS BOX SHOULD BE FILLED WITH CONTENT SPECIFIC TO THE IMAGE: <br /> IE A DESCRIPTION OF THE IMAGE. </p> <p> </p> </td> </tr> </table> Here's the CSS: Code: #productImages{
float:right;
margin-right: 21px;
postion:absolute;
height:78px !important;
width:300px;
overflow: scroll;
}
Here's the site: http://www.caillouette.com/alpha-dream3/alpha-maschio.html# Basically I need a horizontal scroller, and not a verticle. Why are my images stacking vertically instead of horizontally? thanks hi all, I am trying to figure out how to have multiple CSS Rollover images with links on one page. Any ideas, tips, suggestions or samples are greatly appreciated! Brook I have split up a huge background image into three much smaller images. I want one of them to tile horizontally across the top of the page, another to tile vertically down the left side of the page, and the third to be in the topleft corner of the page. Is there anyway to do this in IE6? I have tried using multiple containers and the background-position attribute, but have been unable to get it right. Any ideas? http://www.brendanclements.com/UPS/ Code:
@charset "utf-8";
/* CSS Document */
body{
background-color:#000;
text-align:center;
min-width:800px;
background-image:url(images/lft.jpg), url(images/rht.jpg);
background-repeat:repeat-y, repeat-y;
background-position:top left, top right;
}
table{
background-color:#000;
border:none;
border-style:none;
min-width:800px;
width:75%;
margin-left:auto;
margin-right:auto;
}
td{
color:#FFF;
border:none;
border-style:none;
text-align:center;
}
WHY WHY WHY WHY! lol, this is very frustrating. I have 2 background images, one for the left side to repeat down and a mirrored one on the right. I have done my research, I have tried multiple ways posted online to layer background images to have more than one. But it won't work. I have verified the background url's which work when there is only one, but not when I try to have two. I know I could get a workaround with a div but I want to know why this is not working and don't want to make my code more sloppy. Thank you. Hello, I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped. I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre. I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this: Code: [ ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
[ ]
---- variable empty space depending on browser width
I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great. Code: #header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
#imgleft {
float: left;
text-align: right;
width: 30%
}
#imgright {
float:right;
text-align: left;
width: 30%
}
<div id="header">
<div id="imgleft">
<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
<img src="l_about.gif" alt="About">
</div>
<div id="imgright">
<img src="l_blog.gif" alt="Blog">
<img src="l_contact.gif" alt="Contact">
</div>
<div id="title">
<img src="title.gif" height="84" width="400" alt="Title">
</div>
</div>
does anyone know how i can get 4 background images in my table, one for each corner of the table? they are curved images, as i am aiming for the table to have curved edges. Thanks Hello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... http://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know). It looks like this initially... ...and I'm trying to indent the entire element below the header text like so... ...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe). I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied). What I've tried thus far is to use either of the following... Code: TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something? I would really appreciate any assistance possible. Hey AHH I know that there is a lot of code to look at but I'm only working on the middle box with the cross. All I am wanting to figure out right now is how to get the parent div.icross to show all it's background in FF. It shows and looks how I want it to look in IE, so you can use that as reference. You guys are always so much help and I REALLY appercaite it. Thanks so much to whoever helps me. - Jacenta Here is the page: tri-m.com/index_newlayout.html Here is the css that only corresponds to the middle to make things easier for you to see: Code:
div.icross /* index cross */
{
background:url(trim_images/layout/cross_background.gif);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:top;
width:540px;
height:1%;
}
div.ilogo /* logo in cross, top left box */
{
width:192px;
height:57px;
margin-right:1px;
margin-bottom:2px;
float:left;
text-align:right;
padding:0;
}
div.ind /* name/description in cross, top right box */
{
width:346px;
height:57px;
margin-left:1px;
margin-bottom:2px;
float:right;
text-align:right;
padding:0;
}
div.iimage /* image in cross, bottom left box */
{
width:192px;
float:left;
margin-right:1px;
margin-top:1px;
height:1%;
}
div.iinfo /* info in cross, bottom right box */
{
width:346px;
float:right;
margin-left:1px;
margin-top:1px;
text-align:left;
height:1%;
}
.trimdescription
{
color:#1b4da6;
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:normal;
width:540px;
}
.pname /* product name */
{
color:#063891;
font-family:Arial;
font-size:28px;
padding:0;
}
.pdescription /* product description */
{
color:#f47720;
font-family:Arial;
font-size:12px;
font-style:italic;
text-align:right;
padding:0;
margin-left:15px;
}
div.clear /* clear div/container */
{
clear:both;
}
div.fptitle /* featured products title/banner */
{
width:540px;
height:19px;
padding:0;
margin:0;
}
div.fproducts /* featured products small images */
{
background-color:#e8e8e8;
width:540px;
height:76px;
padding:0;
margin:0;
}
I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp Please look at this page http://osake.garychus.com/menu2.asp I am trying to wrap a div (red border) around each category on this restaurant menu. For some reason the code looks right but the red border does not enclose the entire category section(s). I validated the html but think the issue is css related. Any help is appreciated. Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> Hey everyone, I am working on a design of mine, and so far it is coming along very well. The problem is, when I am working with the menu, I cannot get the sub menu to appear directly below the parent. Here is a screen shot of what is happening. I hovered over the 2nd menu item, and the sub menu appeared under the 1st. I know why it is doing it, I just can't seem to fix it. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/JavaScript" src="jquery.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } a:focus, a img { outline: 0 none; border: 0 none; } a { text-decoration: none; color: #8D1D45; } html,body { text-align: center; background-color: #C5CED5; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 13px; height: 100%; width: 100%; } #container { width: 852px; background-color: #FFFFFF; text-align: justify; margin: 0 auto; overflow: hidden; height: auto; } #header { background-image: url( http://img103.imageshack.us/img103/8229/header02bd6.jpg ); background-repeat: no-repeat; height: 130px; } #header h1 { color: #8D1D45; letter-spacing: -0.1em; font-size: 26px; margin-left: 300px; padding-top: 50px; } #header span { color: #687788; } #menu { width: 100%; margin-top: 6px; margin-bottom: 5px; } #menu li { display: inline; margin-right: -5px; } #menu a { background-color: #FFF200; opacity: 0.7; filter: alpha(opacity=70); padding: 5px 76.3px; border: 1px solid #000000; } #menu ul ul { display: none; float: left; margin-right: 4px; } #menu ul ul li { display: block; line-height: 30px; } #menu ul ul li a { display: block; max-width: 110px; padding: 5px 80px; } #menu ul ul li.first { margin-top: 6px; } </style> <script type="text/javascript"> function show( id ) { $( "#" + id ).show("slow"); } function hide( id ) { $( "#" + id ).hide("slow"); } </script> </head> <body> <div id="container"> <div id="header"> <h1>ryon.<span>hunter</span></h1> </div> <div id="menu"> <ul> <li><a onmouseover="show('sub1')" onmouseout="hide('sub1')" href="">Tutorials</a></li> <li><a onmouseover="show('sub2')" onmouseout="hide('sub2')" href="">Tutorials</a></li> <ul id="sub1"> <li class="first"><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href="">CSS</a></li> <li><a href="">X/HTML</a></li> </ul> <ul id="sub2"> <li class="first"><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href="">CSS</a></li> <li><a href="">X/HTML</a></li> </ul> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I am only testing it in FF2 at the moment, I will test other browsers when I get it working in FF. P.S. Does anyone know how to get my menu to stay when the menu items are being hovered over? So far it just goes away when I take the cursor off of the top menu. I think I'm having a CSS brain fart here. I'm trying to nest some divs, which is working, but the "helper" won't go where I need it to go. The "helper" is inside the "map" and needs to sit at the bottom of the "map" div because the regular content that appears in there (images) may not be the full height. Currently, the "helper" is sitting just below the image. For example, MAP is 400px tall. HELPER is 98px tall. If there is a picture in MAP that is 213px tall, then there should be 89px between the bottom of the image and HELPER. Here is the code: PHP Code: #content { border:1px solid #000000; margin:0px auto; width:900px; height:402px; text-align:left; } #content #map { float:right; width:302px; height:400px; margin:2px 2px 2px 2px; display:inline; text-align:center; } #content #map #helper { top:300px; width:298px; height:98px; } I've tried position and bottom as well. Those items seem to ignore the dimensions of #map and throw the div at the bottom of the page instead of the bottom of #map. If there is a better way, let me know. should have read more in the forum. sorry. I've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport? CSS: Code:
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
.page {
background-color: #dddddd;
margin-left: -390px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-top-color: #9CB0C0;
border-right-color: #9CB0C0;
border-bottom-color: #9CB0C0;
border-left-color: #9CB0C0;
position: absolute;
height: 100%;
min-height: 100%;
width: 780px;
left: 50%;
top: 0;
}
.header {
position: absolute;
height: 158px;
width: 764px;
background-color: #FFFFFF;
left: 7px;
top: 0px;
}
.content {
position: absolute;
left: 7px;
top: 159px;
background-color: #9CB0C0;
height: 821px;
width: 764px;
margin-bottom: 34px;
}
.footer {
background-color: #415569;
height: 34px;
width: 764px;
left: 7px;
bottom: 0px;
}
And the HTML: Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="lPage" style="position:absolute; z-index:1" class="page">
<div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
<div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
<div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>
I've searched through a few of the threads here, but haven't been able to find an answer either. Thanks, Brent hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks |
|||||||