|
CSS - Images And Variable Amount Of Text
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.) Similar TutorialsThere 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) I 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'm trying to create a layout (internal to a page - in the content area) that looks like this image image image image text text text text without using tables. This works great using floats but I want the entire block of images/ text centered in the container. Currently this is just left justified which looks really bad my code Code: <div align="center"> To view the site plan, please click the image below. </div> <br> <div align="center"> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1"> <img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br> Bahia Mar </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2"> <img src="siteplan/images/ecbs_01.gif"></a><br> Pier 66 </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3"> <img src="siteplan/images/ecbs_01.gif"></a><br> Convention Center </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4"> <img src="siteplan/images/ecbs_01.gif"></a><br> Sailfish Pavilion </div> </div> lfloat just specifies float:left i am pretty new to web development, and i have a big problem which i cant seem to find a solution to.. i want to type on top of an image on my web page... the image is placed in a table and the table (the whole tag from <table> to </table> including image) has been relatively placed on the page using div tag. so how do i get around typing something ON TOP OF the image ??? for eg... on the ibm dot com homepage, on the header, on the right side, the text "united states" is placed on top of an image... i want to achieve a similar effect. please help me.. please. and any recommendation for good positioning tutorials ? i mean, the only way i am able to make text appear over images is by making a new table seperately, and using div tags and set the position as absolute, and setting the z axis to auto which lets me move the table around anywhere on the page (even on top of images) in dreamweaver... isnt there any better way of doing it ? and im sorry if this post belongs to some other area, i think his problem is css related.. im sorry ima complete noob first time on any web development forum. here is my code Code:
<div class="abovefooter">
<table width="906" height="108" border="0">
<tr>
<td><img src="images/above_footer.jpg" width="906" height="108" /></td>
</tr>
</table>
</div>
<div class="above">
<p>News Forums extreme</p>
<p> </p>
</div>
and here is the "above" and "abovefooter" css code: Code:
.above {
position: absolute;
z-index: auto;
height: 100px;
width: 930px;
left: 13px;
top: 432px;
right: auto;
bottom: auto;
}
.abovefooter {
position: relative;
z-index: auto;
height: auto;
width: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
}
Hello... My name is Matt and I'm looking for some help with what could be simple CSS coding. I designed an image using Adobe Photoshop and I plan on uploading it to my website. What I want to try do is make this image after I upload it, to a like certain table. I wasnt sure what the terminology would be for this. I want my image to be the text area instead of using a large textarea code I want the image to be the text area where the text will scroll up and down within the image. I dont want my image to be the background. specifically I need the image itself to be the scrolling text area. Can anyone help me out with this coding? Or steer me in the right direction of terminology for this? I'd appreciate it... Thanks I'm trying to position some things inside a DIV. Here's the basic layout: What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong. Image One is easy, but the text and Image Two I just don't seem to grasping. I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there. Should the text block and Image Two be within a separate DIV? Hi! I've a problem that I've been trying to solve for a couple of hours now... on my test-site testsite You can se my horisontal menu not turning up alright, The four images (house, ball, discussion and about) won't be in line with eachother... When I select the text and images in Firefox, I can easily see that there is something wrong... Can somebody please give me a push in the right direction? BR I would like the align text next to the image and have it flow from the top down. Not adjacent then underneath it. HTML Source CSS Source Once you view the html file, I think you get a better picture of what I'm talking about. Seems a simple question, but how do I add padding to text within a box but not affect the images? in my columns I have little 'features' but I have a title above each image and some description text below. What's the simplest way to code it so all the text has side padding, but not the image? I put a fairly large image and centered it using. Code: background: #484747 url(img/main.png) fixed; background-repeat: no-repeat; background-position: center; That put it exactly in the center in all browsers (that I have). So working great so far. I then want to load a button on top of that image (like just a button) that says "Enter" So I make a button and I go through everything until I choose absolute and giving it percents to be exactly where I want it. I refresh the page and boom its there, I move the webbrowser height, use a different browser and its broken badly. What do people recommend using? Like relative and padding or what? Since what I'm using right now only works for my setup. Example: three rows of four pictures each. Code: <center> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <p> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <p> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> </center> But what if I want to put text below each image? Code: <center> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <p> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <p> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah </center> We lose our rows and tidy appearance. So, put them all in divs, right? Code: <center> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <p> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <p> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> </center> Great, text below image but the rows are completely gone. If I try to use float then the positioning gets scrambled from the other text and headings on the page. Is there a way to handle this? I want multiple rows of four pictures each, with text below each image. Thanks. Hi, I want to create a page where users can advertise using templates overlaid with their own text. Many of these templates are cascaded forming a montage effect (left to right, top to bottom). I figured this could be done using CSS or PHP. Here is the CSS version..... User enters data in form (subsequently stored in database) User chooses background image (80px by 80px) CSS used to style the text with the chosen image as a background.....in a sized container. I know this can be done and have achieved it with varying levels of success, but am unsure as to the best method. Q1 - What would be the best tag or container to use? The text will be used as a link and must display text when 'hovered' over. Should the text be inside <a>, <li>, <div>, etc etc. I don't know which is best for this purpose. I know the <acronym> tag can be used for 'hover' text, but besides misusing a tag, it's not supported in Opera (so far as I can see) and is displayed differently in firefox/IE. Q2 - What is the best method of displaying additional text (in multiple browsers) on 'hovering' the link; could I use a 'hidden' div (which is set visible on hover) rather than a tag property, and if so, how could I make it work for links at the edge of the screen (will the layer appear offscreen)? Not sure how to do this? Thanks for your time, all responses greatly appreciated. Duncan 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 Wow I REALLY hate CSS. For hours I have been trying to figure this out: Here is some HTML Code:
<td>
<div class="linksbar">
<div class="linkstext">
link - link - link - link
<img src="imagelink.jpg">
<img src="imagelink2.jpg">
</div>
</div>
</td>
[CODE]
the CSS
[CODE]
.linksbar {
height: 28px;
background-image: url(bg.jpg);
}
.linkstext {
vertical-align: middle;
line-height: 28px;
font-weight: bold;
color: white;
}
First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle. Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something. Hi, I have put off using css for a long time and now i need to figure it out. I am using a free template to learn with. My problem is at the bottom of the page I have 3 small images in a row across the bottom of the page. Theoretically 3 columns across the bottom with text next to each image. I have played with it for four hours now and give up. Currently the images show but the text runs through the three images. Here is the css relevant code i believe: Code: /* hotstuff */ #hotstuff { width: 100%; background: url("hotstuff_bg.gif") repeat-y; } * html #hotstuff { padding-bottom: 10px; } #hotstuff h2 { background: #3b2000; border-top: 1px solid #fff; } * html #hotstuff h2 { width: 100%; } #hotstuff .imagebox { padding: 2px 8px 2px 13px; margin: 2px 0; background: 4px no-repeat; float: left; width: 200px; } #hotstuff #hot-one { width: 180px; } #hotstuff #hot-two { width: 140px; margin-left: 2px; } #hotstuff #hot-three { width: 120px; margin-left: 2px; } * html #hotstuff #hot-one { width: 290px; width: 180px; } * html #hotstuff #hot-two { width: 250px; w\idth: 140px; } * html #hotstuff #hot-three { width: 230px; w\idth: 120px; } #hotstuff h3, #hotstuff p { margin: 0 0 0.2em 0; } * html #spacer { margin-top: 8px; }
I am using of course that the html #hotstuff, 1 , 2 and 3 respectively is for the text but i may be wrong. Any help would be appreciated to help me understand css more. Thanks, Gibs Hi, I'm a begginer in css and html, I've started a webite but the text is not where I want it to be and the Image is where I want it but only because of the text ... So I would like somone to help me with this ^^ Here is the HTML: 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" />
<title>unknown</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" lang="fr" content="q." />
<meta name="keywords" content="s" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
</head>
<body>
<div id="menu"
<div id="leftborder"></div>
<div id="topborder"></div>
<div id="sidebar">
<span class="title">
<h1>Title</h1></a> <p>Sub
</span>
<ul id="nav">
<li><a href="#overview">→Page Principale</a></li>
<li><a href="#example">→Photos</a></li>
<li><a href="#how">→Descriptif</a></li>
<li><a href="#download">→Tarifs</a></li>
<li><a href="#support">→Nous Contacter</a></li>
</ul>
</div>
<p>Welcome to my website !!
<span class="images">
<a href="images/gg.jpg" rel="lytebox" title="Moon on the ocean"><img src="images/gg.jpg" width="500" height="400" alt="" /></a>
</span>
</div>
</body>
</html>
Here is the CSS: Code:
*{
margin: 0;
padding:0;
}
body
{
background-color: #93845E;
color: #eee;
font: 86% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
#topborder{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4.0em;
background-color: #1b1f28;
}
#leftborder{
position: fixed;
top: 0;
left: 217px;
width: 0.3em;
height: 100%;
background-color: #32322E;
}
#menu{
position:fixed;
top: 31%;
left:15px;
width: 230px;
}
* html div#menu {
top: 38px;
left:20px;
width: 230px;
position:absolute;
}
#content{ margin: 45px 20% 5em 315px; }
#content p a:hover,
#content dd a:hover { border-bottom: 1px dotted #8ad459; }
h1, h2, h3{ font-family: "Trebuchet MS",Verdana,Sans-Serif;}
h1 {
display: block;
font-size: 2.3em;
background-color: #32322E;
}
h1 a { color:#fff; border: none; }
h1 em{ font-size: 0.45em; font-style: italic;
text-transform: lowercase;
}
h2 {
font-size: 1.5em;
letter-spacing: 0.4pt;
color: #4985A9;
text-transform: uppercase;
padding-top: 0.5em;
}
h3 {
font-size: 1.0em;
letter-spacing: 0.2pt;
color: #c0dB5A;
text-transform: uppercase;
padding-top: 0.5em;
}
a{
color: #1b1f28;
text-decoration: none;
}
a img{ border: none;}
p { line-height: 1.5em; margin-bottom: 1.0em; font-size: 0.9em; align: right;}
p.lead { font-size: 1.0em; }
/* Liens
----------------------------------------------- */
#menu a{
color: #fff;
}
#menu h1 a{ font-weight: normal; }
#menu h1 a:hover{ }
#nav{ list-style: none; margin: 2em 2em 2em 0;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.2em 0.2em 0.8em;
margin-bottom: 1px;
color: #eee;
background-color: #32322E;
}
#nav a:hover{
background-color: #1b1f28;
}
/* Autres */
#content ul.download li{
padding: 0.3em 0;
background-image:none;
}
#content ul{ margin-left: 4px;}
#content ul li{
list-style: none;
padding: 0 0 0 12px;
}
.section{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.first{ border-top: none; padding-top: 0; }
.title{
position:fixed;
top: 15%;
left:15px;
width: 205px;
}
.quote{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.images{
padding: 3px 3px 8px 250px;
background-color: #222;
border: 1px solid #2a2a2a;
float: center;
margin-right: 1px;
margin-bottom: 10px;
}
.section{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.first{ border-top: none; padding-top:
I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text. I made inline div and tables with these elements but it seems to wrap arbitrarily around the page. any suggestions? Hello, I've always made my menu buttons with the text built into the image but is there a better way to do it? Thanks for the help. Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser. One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site. My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content. Anyway to fix this? I am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position: absolute;
top:75;
left:180px;
z-index: 1;
width: 800px;
height: 600px;
background-image:url('WEROCK-NETWORK-BG2.png');
}
}
#sidebar {
position: absolute;
top:95;
left:1000px;
z-index: 1;
width: 175px;
height: 600px;
background-color: #FFFFFF
}
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
<script language="JavaScript">
function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth;
var ah = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(1024, 768);
}
}
</script>
<body onload="javascript:maximizeWin()">
<img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" />
<div id="content">
test
</div>
<div id="sidebar">Sidebar test</div>
</body>
</html>
|
|||||||