Topic: Need a little CSS help please

[K4KMG]

I just started screwing around with a new website and am having trouble with some of the css.

See here: http://k4kmg.com/

I can't seem to get any white space below each jpeg.

Style:
#content {
margin:0 0 0 20%; padding:0.8em; border-left:1px solid #294D69;}

#content img {
float:left; border-style:none;}

q {
display:block; margin:0; padding:0.4em 20% 0.6em 20%; color:#999999; font-size:120%;
text-align:center; height:3em;}

q:before, q:after {
content:"";}

#content h1 {margin:0; padding:0.1em; text-indent:2.5em;}

html:
<div id="content">

       <h1>River Ranch Camp</h1>
       <p><img src="http://k4kmg.com/images/camp-1.jpg" alt="River Ranch" width="760" height="399"></p>
      
       <p>
       <img src="http://k4kmg.com/images/camp-2.jpg" alt="k4kmgweather.com - Vero Beach Florida" width="760" height="334"></p>
       <p><img src="http://k4kmg.com/images/camp-3.jpg" alt="k4kmgweather.com - Vero Beach Florida" width="760" height="305"></p>
       <p></p>
      
       <h1>Test</h1> etc......

Any help would be appreciated.
Thanks

[ALITTLEweird1]

Why dont you just add <br/> between the images? That'll give you a space.

[K4KMG]

Why dont you just add <br/> between the images? That'll give you a space.

Tried that. Doesn't work. The css has priority.

[ALITTLEweird1]

Doing this doesnt work?

<p>
       <img src="http://k4kmg.com/images/camp-2.jpg" alt="k4kmgweather.com - Vero Beach Florida" width="760" height="334"></p>
       <br/>
       <p><img src="http://k4kmg.com/images/camp-3.jpg" alt="k4kmgweather.com - Vero Beach Florida" width="760" height="305"></p>
       <p></p>

[ALITTLEweird1]

Example

output:

hello
How are you

code:
<p>hello <br /> How are you </p>

[K4KMG]

Example

output:

hello
How are you

code:
<p>hello <br /> How are you </p>

No it does not work. I'm a fairly decent html hack, but not real good with style sheets.

[wvdkuil]

I just started screwing around with a new website and am having trouble with some of the css.

See here: http://k4kmg.com/

I can't seem to get any white space below each jpeg.

Style:
#content {
margin:0 0 0 20%; padding:0.8em; border-left:1px solid #294D69;}

#content img {
float:left; border-style:none;}

q {
display:block; margin:0; padding:0.4em 20% 0.6em 20%; color:#999999; font-size:120%;
text-align:center; height:3em;}

q:before, q:after {
content:"";}

#content h1 {margin:0; padding:0.1em; text-indent:2.5em;}

html:
<div id="content">

       <h1>River Ranch Camp</h1>
       <p><img src="http://k4kmg.com/images/camp-1.jpg" alt="River Ranch" width="760" height="399"></p>
      
       <p>
       <img src="http://k4kmg.com/images/camp-2.jpg" alt="k4kmgweather.com - Vero Beach Florida" width="760" height="334"></p>
       <p><img src="http://k4kmg.com/images/camp-3.jpg" alt="k4kmgweather.com - Vero Beach Florida" width="760" height="305"></p>
       <p></p>
      
       <h1>Test</h1> etc......

Any help would be appreciated.
Thanks

change the css from
#content img {  float:left; border-style:none;}
to
#content img {float:left; border-style:none;  margin: 0 0 20px 0;}

Wim

[K4KMG]

Thanks! That was driving me nuts!

[wvdkuil]

Thanks! That was driving me nuts!

No need to driving that way. It should be a HOBBY.

Just when testing it is  easier to add the style things to the object and first test until it is OK. Then add it to the stylesheet.
This img
<img src="http://k4kmg.com/images/camp-2.jpg" alt="--" width="760" height="334">
I would first code it is
<img src="http://k4kmg.com/images/camp-2.jpg" alt="--" style="width: 760px; height: 334px; margin: 0 0 20px 0;">
and so on, until satisfied. And than put the general things in the stylesheet.
When you want to have all images the same size put the width also in the css and forget about the height in this case, the browser will do that nicely.

Wim

[K4KMG]

Thanks. For some reason I've always had trouble with 'padding'/'margin' stuff.

Now I need to figure out how to use smaller images and make them 'clickable' to show the larger size.

[cospringswx]

Thanks. For some reason I've always had trouble with 'padding'/'margin' stuff.

Now I need to figure out how to use smaller images and make them 'clickable' to show the larger size.

I use it on my site. It's called a magnify. Go to my home page and hover your mouse over the radar in the middle and a magnifier pops up. When u click the radar it gets larger. If this is what you are looking for let me know and I will post the code.

[K4KMG]

Thanks. For some reason I've always had trouble with 'padding'/'margin' stuff.

Now I need to figure out how to use smaller images and make them 'clickable' to show the larger size.

I use it on my site. It's called a magnify. Go to my home page and hover your mouse over the radar in the middle and a magnifier pops up. When u click the radar it gets larger. If this is what you are looking for let me know and I will post the code.

That would be perfect!

[cospringswx]

Upload the 2 files to the root directory for your website.  Put the code below in the head section of the page you want to magnify images.

Code: [Select]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

This is the code to my radar on my home page that magnifys. Notice the class="magnify"

Code: [Select]

<img src="http://radblast-aws.wunderground.com/cgi-bin/radar/WUNIDS_map?station=PUX&amp;brand=wui&amp;num=10&amp;delay=15&amp;type=N0R&amp;frame=0&amp;scale=1.000&amp;noclutter=0&amp;t=1361122686&amp;lat=0&amp;lon=0&amp;label=you&amp;showstorms=0&amp;map.x=400&amp;map.y=240&amp;centerx=400&amp;centery=240&amp;transx=0&amp;transy=0&amp;showlabels=1&amp;severe=0&amp;rainsnow=1&amp;lightning=0&amp;smooth=0"  class="magnify" style="border:solid; border-color:#000000;" height="230" width="287" alt=""/>
This page I have all of the radars magnify.

http://cospringsweather.com/wxradars.php


If you need more instructions use the page below.

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

[W3DRM]

Ryan - nice touch! 

Tom - For some help on CSS and many other web coding items, take a look at the following link:

• http://www.w3schools.com/

Here's another link that shows the details of what Ryan posted:

• http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

73's

[cospringswx]

Thanks Don. 

[geofb13]

To add an option for your image pop up query, you could use lightbox and is similar to what cospringwx uses and suggested. It creates more of an album feel though and gives you an option to move between photos on the page that share the code. I don't know if Magnify can do something similar as I haven't used it but like I said the two are similar.

https://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

[W3DRM]

To add an option for your image pop up query, you could use lightbox and is similar to what cospringwx uses and suggested. It creates more of an album feel though and gives you an option to move between photos on the page that share the code. I don't know if Magnify can do something similar as I haven't used it but like I said the two are similar.

https://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

I use Lightbox quite a bit in my websites for displaying photo albums. The only real downside to it is that you have to create your own thumbnails (small images) which then open the desired main image file. A little extra work but it keeps everything consistent. It would be nice to be able to simply load a bunch of images (of any size) into a folder and then have a routine that would automatically display the files as thumbnails for selection and then display them individually or as a slide-show. That kind of software may already be available but I haven't found it...

[K4KMG]

Thanks everyone. i got the js to work, just have to figure out the scaling portion.

[geofb13]

I use Lightbox quite a bit in my websites for displaying photo albums. The only real downside to it is that you have to create your own thumbnails (small images) which then open the desired main image file. A little extra work but it keeps everything consistent. It would be nice to be able to simply load a bunch of images (of any size) into a folder and then have a routine that would automatically display the files as thumbnails for selection and then display them individually or as a slide-show. That kind of software may already be available but I haven't found it...

I forgot about the whole resizing thing when I first posted it, which as you said does make it a bit more time consuming. As far as resizing images in batches I've used a routine in MatLab for automatically resizing processed radar data. And if I am remembering correctly in my grad classes I resized actual jpgs or pngs of data one at a time with it as well so I assume you could do it that way. But if that's the case you either have to own MatLab or know how to convert the script from their to a workable language outside of software. I don't have a copy of MatLab installed on my personal computer so I couldn't tell you if I was able to do that with just the base package or if it was in one of the add-on's we had.

[K4KMG]

Thanks for everyone's help. If interested, you can see current progress here: http://k4kmg.com/

[geofb13]

Thanks for everyone's help. If interested, you can see current progress here: http://k4kmg.com/

Looks good with the magnify script incorporated.