|
CSS - Wrapping Images In Variable Width Box - Is It Even Possible?
There are very few things which are just impossible to do using HTML and CSS, but I'm wondering if I've finally hit something that is.
First, some background: I'm trying to do some code for a wordpress image gallery on my blog. I have a plugin that allows me to code the gallery however I want, so that's not a problem. However, I'm redesigning my site, and I want to keep both galleries I have already posted and new galleries that I'm going to post to all look the same. The problem is this: the old galleries all have 2 images in a row, while the new ones will have 3 images in a row (and perhaps even 4 in some situations). All images in any given gallery will have the same heights and widths, but height and width of images between galleries can change. What I've been trying to accomplish is the following: A box, which creates a border around the entire gallery. Images stack horizontally as wide as they can go on the page, then drop down to the next line. As I said, sometimes this will be 2 and sometimes 3 images. However, the border should always be "skin tight" (give or take a few pixels of padding) around the gallery. I've tried just about every combination of tags, floating, and display options, and nothing seems to work. Either the containing element is either full width of it's container (if container is display block or inline-block with no width) constrains the widths of the images (if it does have a width), or the box doesn't fully contain the top row of images (if the container is display inline with non-floated content). I can usually either get the right width, but not the right height, or the right height, but not the right width. Getting both the right height and width appear to be the problem. As of right now, my code for the gallery looks something like the following (it is ever changing, so it's kind of pointless to post what it is at this exact moment): Code: <div class="outer"> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> </div> However, I'm just running out of ideas, and I'm about ready to either say "screw the look of the old galleries" or use wordpress's built in options for how many rows there are (the problem with this is I have to set it for each gallery - something that I'm trying to avoid if possible, as resorting to that also presents issues with galleries I've already posted) Similar TutorialsI have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way? Here is the relevant code Thanks --James Code: <div class="articlebox"> <div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div> </div> css Code: Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }
I've got an interesting problem with Internet Exploiter. I have a navbar on the left side, and a large image next to it on the right. Now for most people viewing the page, there isn't any problems at all. If you use Mozilla, there's no issues, and usually nothing goofy in Internet Exploiter. But when you shrink the window size of IE, the large comic jpg 'wraps' down the page. If you take a glance at the source code at http://www.evilstudio.com and the css at http://www.evilstudio.com/main.css you can see that I've been using max-height to keep the image divs on the sidebar from covering each other up, and I'm using seperate divs to make them stack. Can't say if it's the best way to be doing that or not... I've tried quite a few things, such as making the comic absolute, floated, given it a min-width, (even though i know why that wouldn't help...) set it's text wrap to normal, you can see I've got an overflow-x on it right now, so it's reasonable to assume that i've done overflow and overflow ... Tried giving the comic a margin of 168 px... whatever I could scrounge up off of google and the O'Reilly book I had to return to the library... I'll probably be checking this thread periodically for the next few hours so if there's any questions, I'd be more than happy to pass out answers like cake at a party. This problem has been driving me crazy. Long story short, this is what it looks like in Firefox 3. This is the correct way it should look. (ff.jpg) This is the way it looks in both IEs (ie.jpg) The entire third <li> item wraps correctly in firefox, but in ie, the word within the <li> wrap, but not the entire <li> element. Here is the html: Code: <ul class="tabNavSecondary"> <li><a href="#preventionSub1">Prevention</a>|</li> <li><a href="#preventionSub2">xxxxxx</a>|</li> <li><a href="#preventionSub3">xxxxx</a>|</li> <li><a href="#preventionSub4">xxxx</a>|</li> <li><a href="#preventionSub5">xxxx</a>|</li> <li><a href="#preventionSub6">xxx</a></li> </ul> CSS: Code: .tabNavSecondary{
float:left;
margin:6px 0 15px -5px;
}
.tabNavSecondary li{
background:none;
display:block;
float:left;
margin:0;
padding:0;
}
.tabNavSecondary li a,
.tabNavSecondary li a:link{
float:left;
margin:0 5px;
color:#003399;
}
Any thoughts? I've tried for about an hour with all sorts of different styles. Hello all I am putting together a design based almost entirely on ems, so that if text-size is altered, line-length will remain consistent. Obviously, images are by definition of pixel dimension, so they would not enlarge or contract in the same way when the text size is changed. How about enclosing images in DIVs of em dimensions, clipped. Would that mean that, as the text size is increased, the DIV would keep its relative size in the design, and more of it would be revealed? Has anyone tried this? Thanks Tom Hi everyone, I'm interested in making the ads in the rightmost sidebar stay within the 900px of the layout. How can I alter this page so that: 1. The images stay inside the container div 2. If the images are larger than the rightmost column, the column expands to the left and will make the main content feed smaller. I'm still kind of rusty with how fluid width works. Site is h**p://www.topofferspage.com I'm pretty sure I know the answer to this unless there is a trick or hack....Can u set a background images height & width in a tag? I have a logo'd masthead that I need to reduce when the user wants to print the page. I know I can just create a print-specific image but, I thought I'd ask to see if there was a way to reduce the image thru .css??? thanks! Stephen Hi! I'm working on a design for an art gallery client that calls for a primary image of variable width with static alignment to the right and bottom, with a row of thumbnails below that align with the left edge of the image. This is working fine in FF and Chrome, but I can't seem to get IE to constrain the containing div by the image width. The thumbnails, floated left, go all the way to the edge of the layout... I've tried different combinations of positioning on the containing div (you can see the comments in my CSS), but can't seem to get it to go. The URL in question is here . Any help would be mightily appreciated! -BBD I'm beginning to suspect that this just isn't possible without javascript, but I'm throwing it out here just in-case I get lucky. Basically, what I want is a square-div that is no more than 90% of the window-height or 90% of the window-width, and will scale to fit the smaller of the two sizes. So, say the viewable area of the page is 800 x 600, the div would scale to be 540 by 540. If the size were 400 x 500, then it would be 360 by 360. I know that of course it's trivial to do with fixed-width divs by specifying a size in pixels, but is there any-way to do it for anything else? Images work nicely, as they will try to remain at the same aspect-ratio when stretched. I'm trying to make a nice simple interface composed of a few large, elements, that is able to scale seamlessly from desktop to mobile screen-sizes. I've been restyling a legacy web app. the old app had height and width attributes for every image. So when you modernize you can create classes that chunk a whole bunch of stuff, one of which is height and width. In order for SEO analysis to like you do you have to keep the old fashioned height and width attributes on every single image tag? Is it OK to have both a style from a class AND height and width attributes? I assume if they conflict the local ones will win, even though strictly speaking they are not styles. Thanks, just curious. I am using the sons of suckerfish drop downs and have managed to produce css code that looks great in all browers, except IE6. In IE6, the top level links stetch all the way across rather than fitting to the text of the link. I figure this is because #nav li is float:left, but #nav li a is display:block which for somereason IE thinks, lets stetch out even though my container says to float. So, can anyone help me keep variable width on top level links and display correctly in all browers? I know in sons of suckerfish they have stated that you must put a fixed width, but thats not an option for me. I don't have enough space to make all of them the same width. So here is the css and some sample code: Code:
#nav {
padding: 0;
margin: 0;
list-style:none;
}
#nav a {
}
#nav li {
float:left;
height:34px;
line-height:34px;
}
#nav li a{
background: url(../images/site/nav-li-bg.gif) no-repeat right center;
height: 34px;
line-height:34px;
padding: 0 8px 0 8px;
font-weight: bold;
font-size: 13px;
font-family: "Trebuchet MS",Bitstream Vera Sans,Verdana;
color: #626262;
display:block;
text-decoration:none;
text-align:center;
}
#nav a:hover {
text-decoration: none;
color:#000;
}
#nav li ul {
position: absolute;
width: 200px;
left:-999px;
background: #fff;
border: 1px solid #ADA8A5;
list-style:none;
margin:0;
padding: 0;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
z-index:99;
}
#nav li ul li {
width: 200px;
margin: 0;
padding: 0;
z-index:99;
}
#nav li ul li a {
display:block;
float:none;
font-size: 11px;
font-family:verdana;
width: 190px;
height:auto;
padding:5px;
margin: 0;
line-height:normal;
font-weight:normal;
color: #000;
z-index:99;
text-align:left;
background: #fff;
border-left: none;
border-right:none;
border-top:none;
border-bottom: 1px solid #e7e7e7;
}
#nav li ul li a:hover {
background: #a2c9f4;
}
Code: <ul id="nav"> <li><a href="">HOME</a> <ul> <li><a href="">Test</a></li> <li><a href="">test</a></li> <li><a href="">test</a></li> </ul> </li> <li><a href="">NEWS</a> <ul> <li><a href="">Latest News</a></li> <li><a href="">Hot News</a></li> <li><a href="">Submit a Story</a></li> </ul> </li> </ul> Hey guys, I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides. This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot. Here's the page: http://aoi2.keysandwings.com/about.php Here's the HTML: Code: <div class="relativetitle"">
<table class="titletable">
<tr>
<td align="center" valign="middle">About</td>
</tr>
</table>
</div>
And here's the CSS: Code: .relativetitle {
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 682px;
height: 30px;
color: white;
background: transparent;
font-size: larger;
text-align: left
}
.titletable {
height: 100%;
padding-left: 10px;
padding-right: 10px;
background: black
}
Hi, I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! I'm trying to make up a thumbnail page that shows pics in a row at a constant height. I don't want the images distorted so the width will vary. I tried: Code: img.proj_thumb {border-style:none; height:75px; width:auto}
Ths worked on mylaptop, but fails on the server - see the attached pics. Any suggestions? Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike I'm working on something in PHP, which will be pulling articles from a database. I want to be able to place images on the page in the same exact spot for every article, and have the text wrap around the images regardless of where paragraphs begin and end. Is there anyway to do this with CSS? (I could do something where the person writing up the article enters a paragraph, and the image that goes with that paragraph, and do that multiple times, but I'm really hoping to just have a form where the person enters the article text in one block, and uploads the 3-4 images, and doesn't have to do anything more complicated than that, and then when the article is output on the page, it just plops the four images on the page where I say they should always be, and the text just wraps around that. Hope that makes sense.) The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? |
|||||||