Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Closed Thread
 
Thread Tools Display Modes
Share |
  #1  
Old 02-10-2016, 04:06 AM
selena.jo's Avatar
selena.jo selena.jo is offline
Junior Member
 
Join Date: 01-19-16
Location: Los Angeles, CA
Posts: 21
iTrader: 0 / 0%
Block of text + gallery of images - need to put together

Hey guys!
Need help with coding issues, hoping to get some answers.
Got a wrapper - fixed 1000px wide.
Image sizes are 275x140px.
There's a block of text at the left and a gallery of 3 thumbnails.
Need to put em in a row on the right.
The issue is that they won't get together in the same row, they become a column of 3 images instead.
What to do?

I got this html code
HTML Code:
<html> <head> </head> <body> <div class="hovergallery"> <h1 class="mg">HEADLINE</h1> </br> <span class="about"> <p><b>TEXT</b> MORE TEXT </p> <p>TEXT</p> <p>TEXT</p> TEXT </span> <ul> <li class="a"><img src="images/1.jpg" alt="Image 1"></li> <li class="a"><img src="images/2.jpg" alt="Image 2"></li> <li class="a"><img src="images/3.jpg" alt="Image 3" /></li> </ul> </div> </body> </html>
And this css
Code:
.a{ float: left; margin: 4px; list-style-type:none; display: inline; } .about{ width:50%; float:left; margin: 0 20px 0 10px; } .hovergallery img{ margin: 0 10px 5px 0; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; } .hovergallery img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity: 1; }
 

Advertisement

Advertisement

  #2  
Old 02-13-2016, 10:46 AM
Antonio05's Avatar
Antonio05 Antonio05 is offline
Contributing Member
 
Join Date: 02-07-16
Location: Vilnius
Posts: 51
iTrader: 0 / 0%
Use different <div> blocks with different styles, and one same style position "display:inline"
 
  #3  
Old 02-13-2016, 02:05 PM
ScriptMan's Avatar
ScriptMan ScriptMan is online now
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 13,874
iTrader: 4 / 100%
A table might be appropriate for aligning text 1 with image 1. It can also be done with multipe divs.

Depending on what you are trying to do simply including the image call within the paragraph would work.

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
html>
<
head>
</
head>
<
body>


<
div class="hovergallery">
<
h1 class="mg">HEADLINE</h1> </br>
<
span class="about">
<
p><b>TEXT</bMORE TEXT </p>

This look is created by simply including the image call within the paragraph tags.  You would need to size the images.

<
p>TEXT <img src="images/1.jpg" alt="Image 1"></p>
<
p>TEXT <img src="images/2.jpg" alt="Image 2"></p>
<
p>TEXT <img src="images/3.jpg" alt="Image 3" /></span>


</
div>
</
body>
</
html
Attached Thumbnails
Click image for larger version

Name:	screenshot.jpg
Views:	17
Size:	32.8 KB
ID:	18495  
 
  #4  
Old 02-17-2016, 09:00 AM
selena.jo's Avatar
selena.jo selena.jo is offline
Junior Member
 
Join Date: 01-19-16
Location: Los Angeles, CA
Posts: 21
iTrader: 0 / 0%
Thanks for your help guys!

Actually the solution turned out to be a lot easier, I got wrong crunching numbers, had to change the image dimensions to 140x140px, make them smaller as well as balance with the <span> width:45%. Also I used style position "display:inline" and float:left to create a new row and got it this way:

Text img img img
Text img img img
Text img img img
 
Go Back   Webmaster Forum > Web Development > Coding Forum

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Own alt text for images/links? davelev Coding Forum 3 02-11-2011 01:56 AM
how to use png images in a text widget on wordpress? madcaptains Blogging Forum 2 04-01-2009 05:17 PM
need help inserting text and images - myphpdirectory CircleOfLinks Web Design Lobby 12 09-22-2007 11:15 PM
Does anybody have the code for placing images next to a rectangle adsense block? kelp Web Design Lobby 1 02-08-2007 08:45 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 04:05 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC