Member Avatar for JRM

Hello,

I have a banner that I want the images to be side by side and the text on the end to the right .
The following code works,but it breaks when the browser size is small. The pictures slide over on top of the text.
Also why does the text insist upon wrapping? I had to use the negative margin to display it. The text height is less than the image height.

<img src ="image1.jpg">
<img style="margin-left:10px;" src ='image2.jpg'>
<img style="margin-left:10px;" src ="image3.jpg">
<p style="margin-right:10px;float:right;margin-top:-70px">short text line1<br/>shorttext line2<br/>short text line3</p>

I thought that the block item p would start the text at the top of the available space.
What Css should I use to better compensate for the browser size and fix these problems?

Edited by JRM because: n/a
  • 2 Contributors
  • 4 Replies
  • 127 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JRM
Member Avatar for almostbob

html will not display properly unless the doctype is specified properly, throws browsers into quirks mode, which is different for each browser, as they try to interpret what they think the code means
try something like

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type='text/css'>
.wrapper { width:100%; }
img.banner { width:22%; margin:1%; }
p.banner { width:22%; margin:1%; margin-top:3em; float:right; }
</style>
</head>
<body>
<div class='wrapper'>
<p class='banner'>short text line1<br>shorttext line2<br>short text line3</p>
<img class='banner' src='img1.png'>
<img class='banner' src='img2.png'>
<img class='banner' src='img3.png'>
</div>
</body>
</html>

the elements are sized in % and em, which will resize to the window size, font size
Yeah, html4,
everyone says I should update to xhtml,
some of the sites maintained are updating TO html4,
I dont use any features of xhtml,
the effective part of the code will work in xhtml

Not the only solution, A solution

Edited by almostbob because: n/a
Member Avatar for JRM

Well, here's the rub. It's part of a Joomla framework. The main template uses

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The banners are the system stepchildren. They don't get to have a CSS file. All CSS has to be done in line. I did a wrap div as you suggested and allocated the widths, etc.
When I tested it , all of the images stacked on top of each other on the right over top of the text! This is happening on a full screen. Very strange.
The images actually seemed bigger, or maybe it's just the the way stacked.

I went to the authorities at W3 and found some interesting properties of the inline vs block elements.
http://www.w3schools.com/css/pr_class_display.asp

Now, <p> is a block item by default. One could change that with the inline property, BUT I also read in the rules that if you change a block item to inline, you may not have other block items nested within. Maybe the <br/> nullify the inline property?

All of this still does not explain why everything piled up. Could it be that *.jpg won't re-size properly?
I've used the width percentages with great success on text forms, but it seem the images don't play well.

Any idea why?

Member Avatar for almostbob

w3schools have nothing to do with w3, sometimes they are close but no cigar, sometimes they are right

for the other, can you post the code, not guaranteeing an answer, but the real gurus will likely stick a nose in given time
{I get something like

<!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">
<!-- @(#) $Id$ -->
<head></head>
<body>
<div style='width:100%'>
<p style='width:22%; margin:1%; margin-top:3em; float:right;'>short text line1<br>shorttext line2<br>short text line3</p>
<img style='width:22%; margin:1%;' src='img1.png'>
<img style='width:22%; margin:1%;' src='img2.png'>
<img style='width:22%; margin:1%;' src='img3.png'>
</div>
</body>
</html>
Edited by almostbob because: n/a
Member Avatar for JRM

So far,this code below appears to be the best solution. Since the image tag did not seem to like the absolute percentage, I tried auto. Then they all snapped into the expected placement. The wrapper div was not needed. On the flip side, the <p> element did need percentage. The negative top margin was still required to pull the text up into the visible area since a line feed is issued before and after a block element.
The banner now still looks acceptable with a more narrow browser width. Not perfect, but acceptable.

<img style='width:auto; margin:1%;' src='img1.png'>
<img style='width:auto; margin:1%;' src='img2.png'>
<img style='width:auto; margin:1%;' src='img3.png'>
<p style='width:25%; margin:1%; margin-top:-70px; float:right;'>short text line1<br>shorttext line2<br>short text line3</p>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.