CSS Thumbnails and headers overlaping. Float Issue? [VIDEO LINK]

WARNING VIDEO TAKES A WHILE TO LOAD
http://screencast.com/t/BWQ6DNtsM

I really don't know how to fix this other than putting another div. But I dont'
exactly want to do that for every page. random div's everywhere

Is there any other way?

Also I'm trying to get a scaled thumbnail of the orginal picture WHILE maintaining the size of the css box.. Is that possible? Or do I have to scale it in Photoshop and make a separate image =\

You guys must hate me:(

*HTML*

Expand|Select|Wrap|Line Numbers

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>

<title>James Mann - Media</title>

<link rel="stylesheet" href="styles.css" type="text/css">

<meta http-equiv="content-type" 

        content="text/html;charset=utf-8" />

    <meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">

<!--

body {

    background-color: #9cad32;

}

-->

</style></head>
 
<body>

<div id="topbar">

    <div id="buttonconatiner">

      <div id="buttons">
 
        <ul>

          <li><a href="http://pdhtdev.johnabbott.qc.ca/students/2010/james_mann/portfolio/index.htm">Home</a></li>

            <li class="selected"><a href="media.htm">Media</a></li>

            <li><a href="websites.htm">Websites</a></li>

            <li><a href="#">Projects</a></li>

            <li><a href="#">About Me</a></li>

          </ul>

        </div>

    <meta name="keywords" content="Music, Digital, Internet, CSS, HTML, Profile, Design, Web, Photoshop, Dreamweaver, Flash" />

<meta name="description" content="A website where I showcase the latest and greatest work that I've made. Music, Digital Art, Websites, It's all here.

" />

</div>

</div>
 
<div id="wrapper">

<div id="container">

<div id="banner">

<a href="#"></a>

</div>
 
<div id="flashtop">

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

              <div id="flashban" style="width: 700px; height: 150px"></div>
 
      <script type="text/javascript" language="javascript">

                var fo = new FlashObject("flashbanner2.swf", "flashban", "700", "150", "7", "#000000, true");

                fo.addParam("allowScriptAccess", "sameDomain");

                fo.addParam("quality", "high");

                fo.addParam("scale", "noscale");

                fo.addParam("loop", "false");

                fo.addParam("wmode", "transparent");

                fo.write("flashban");

              </script>
 
    </div>
 
<div id="content">

<h1>Digital Artwork</h1>

<p align="center" class="bigz">I made these using Adobe Photoshop CS3, some of them are old but I think they're still kool.
 
<ul class="gallery">

                <li><a href="media/art/DJGloCoverFlow.gif" title=">Dj GloStix - Proxy Album Art" target="_blank"><img src="media/art/DJGloCoverFlow.gif" alt=">Dj GloStix - Proxy Album Art" width="210" height="150" border="0"><span>Dj GloStix - Proxy Album Art</span></a></li>
 
                <li><a href="media/art/HotRikkuSig2.gif" title="Rikku Forum Signature" target="_blank"> <img src="media/art/HotRikkuSig2.gif" alt="Rikku Forum Signature" width="210" height="150" border="0"><span>Rikku Forum Signature</span></a></li>

      </ul>

      </p>

<h2>Music</h2>

<p align="center" class="bigz">Coming Soon.</p>
 
<h2>Flash</h2>

<p align="center" class="bigz">Coming Soon.</p>
 
</div>

</div>
 
<div id="footer">

&copy; <a href="mailto:jwm@videotron.ca">James Mann</a>, 2008, Montreal

</div>

</div>
 
</div>
 
</body>

</html>

*CSS*

Expand|Select|Wrap|Line Numbers

  
html,body {

    margin:0;

    padding:0;

}
 
a:visited {

    color:#CC9900;

    text-decoration:none;

}
 
a:hover {

    text-decoration:underline;

}
 
a {

    color:#CC9900;

    text-decoration:none;

}
 
p {

    line-height:17px;

    padding-left:10px;

    padding-right: 10px;

}
 
.bigz:first-letter {

    font-size:150%;

    line-height:0.8;

}
 
#container {

    width: 700px;

    font-family: serif;

    font-size:14px;

    color: #222222;

    margin:0 auto;

    border-left:solid 1px #333333;

    border-right:solid 1px #333333;

    overflow:hidden;
 
}
 
#wrapper {

    width:750px;

    margin:0 auto;

    background-image: url(images/repeat-y-back.gif);

    background-repeat:repeat-y;

    overflow:hidden;

}
 
body {

    text-align: center;

}
 
#banner {

    width: 700px;

    height: 150px;

    text-align:center;

    background-image: url(images/JamesBanner.gif);

}
 
h1 {

    color:#ffffff;

    display: block;

    width: 700px;

    padding-left:0px;

    padding-right:0px;

    padding-bottom:3px;

    padding-top:3px;

    margin-top:0px;

    margin-bottom:5px;

    border-top: solid 1px black;

    border-bottom: solid 1px black;

    background-color: #666666;

    background-image: url(images/heading.gif);

    font-size:16px;

    text-align:center;

    font-family: Verdana;

    font-style:italic;

    height:19px;

    float:none;

}
 
h2 {

    position:relative;

    color:#ffffff;

    display: block;

    width: 700px;

    padding-left:0px;

    padding-right:0px;

    padding-bottom:3px;

    padding-top:3px;

    margin-top:35px;

    margin-bottom:5px;

    border-top: solid 1px black;

    border-bottom: solid 1px black;

    background-color: #666666;

    background-image: url(images/heading.gif);

    font-size:16px;

    text-align:center;

    font-family: Verdana;

    font-style:italic;

    height:19px;

    float:inherit;

}
 
#content {

    width: 700px;

    text-align:left;

    overflow:hidden;

}
 
#content1 {

    padding-left:10px;

    padding-right: 10px;

    width: 680px;

    text-align:left;

    overflow:hidden;

}
 
#footer {

    margin:0 auto;

    margin-top:0px;

    width:750px;

    height:50px;

    background-image: url(images/footer.gif);

    color: #CC9900;

    font-style:italic;

    font-size:12px;

    font-family: Arial;

    font-variant:small-caps;

    margin-top:10px;

    float:inherit;

}
 
/*NAVIGATION*/
 
#topbar {

    width:100%;

    height:30px;

    font-family:Verdana;

    font-variant:small-caps;

    text-decoration:underline;

    font-style:italic;

    background-color:#353535;

    background-image: url(images/button3.gif);

    overflow:hidden;

}
 
#buttonconatiner {

    width:700px;

    height:30px;

    margin:0 auto;

    overflow:hidden;

}
 
#buttons {

    margin:0 auto;

    height:30px;

    width:700px;

    text-align:center;

    overflow:hidden;

}
 
#buttons ul {

    height:30px;

    float:none;

    clear:both;

    padding:0px;

    margin-top:0px;

    margin-bottom:0px;

    margin-left:0px;

    margin-right:0px;

    overflow:hidden;

}
 
#buttons li {

    padding-top:3px;

    padding-bottom:0px;

    padding-left:0px;

    padding-right:0px;

    height:30px;

    width:140px;

    text-align:center;

    list-style-type: none;

    float:left;

    display:block;

    overflow:hidden;

}
 
.selected, .selected a {

    color:#e1a902;

    overflow:hidden;

    background-repeat:repeat-x;

    }
 
#buttons li:hover {

    background-image: url(images/button3sel.gif);

    height:30px;

    width:140px;

    text-decoration:underline;

    overflow:hidden;

}
 
ul a,a:visited,a:focus {

    color:#ffffff;

    text-decoration:none;

}
 
li {

    text-decoration:none;

}
 
/*FLASH BANNER*/    

#flashtop {

    position:absolute;

    width: 700px;

    height:150px;

    top:30px;

    z-index:99;

}
 
#flashban {

    position: absolute;

    width: 700px;

    height:150px;

    top:0px;

    z-index:99;

}
 
/* THUMBNAIL PREVIEWZZZ!*/
 
ul.gallery{

    list-style-type: none;

    margin-bottom: 20px;

    position:relative;

}
 
ul.gallery li{

    width: 216px;

    margin: 5px;

    border: 1px solid #CCCCCC;

    background-color: #FFFFFF;

    text-align: center;

    float:left;

}
 
ul.gallery li a {

    border: 3px solid #FFFFFF;

    text-decoration: none;

    display:block;

    height: 170px;

    width: 210px;

}
 
ul.gallery li a:hover{

    border-top-color: #CCCCCC;

    border-right-color: #CCCCCC;

    border-bottom-color: #CCCCCC;

    border-left-color: #CCCCCC;

    background-color: #CCCCCC;
 
}
 
 ul.gallery span{

    color: #666666;

    background-color: #FFFFFF;

    float: left;

    width: 204px;

    text-align: center;

    padding: 2px;

    font-size: 10px;

    margin-top: 3px;

}
 
 ul.gallery a:hover span{

    background-color: #CCCCCC;

}

Mar 11 '08 #1

Subscribe Post Reply

3824

nomad

664

Expert 512MB

Depend on how many pages you have I would use two diffent templates.
That way if you have any changes for one template you can and every page that is related to that template will change. You can use your .css file for that as well.

nomad

Mar 11 '08 #2

GloStix

So you say make a seperate css sheet just for this page and maybe other pages that contain gallerys? yea that makes sense. I think I'll do that :)

But it still doesn't solve my problem =[

Oh and is there a way I can preview the img without stretching to the boxs wdith and height?

Mar 11 '08 #3

GloStix

Bump. Any updates? anyone?

Mar 12 '08 #4

GloStix

You're probably avoiding me on purpose :(

Mar 13 '08 #5

GloStix

Come on guys, I need your help :(

Mar 15 '08 #6

drhowarddrfine

7,435

Expert 4TB

I don't know why you aren't getting responses except it's a lot of code. My excuse is workload and too lazy to go to my Windows box so I can see the flash. **sigh**, I guess I'll do this tomorrow. I'm so tired. **sigh** ;)

Mar 15 '08 #7

Markus

6,050

Expert 4TB

You're probably avoiding me on purpose :(

That's abit immature, isnt it?

Mar 15 '08 #8

Michael7

I wish I could help you out, but I'm fairly new to this myself.

But, concerning the thumbnail and everything. I had always thought you did need to make a separate image for it. Yet again, I may definitely be wrong.

Mar 15 '08 #9

GloStix

I don't know why you aren't getting responses except it's a lot of code. My excuse is workload and too lazy to go to my Windows box so I can see the flash. **sigh**, I guess I'll do this tomorrow. I'm so tired. **sigh** ;)

Thank you man. I seriously appreciate it :)

Mar 15 '08 #10

GloStix

That's abit immature, isnt it?

Does it sound like I'm 37 years old or something on the video >.>
puting n00b in your name could be considered immature also.
Please don't flame my thread unless it's constructive. Thank you.

Mar 15 '08 #11

drhowarddrfine

7,435

Expert 4TB

Just to let you know I looked at that video. I thought the video WAS the site. I'll look into this after dinner.

Mar 15 '08 #12

drhowarddrfine

7,435

Expert 4TB

Mar 15 '08 #13

drhowarddrfine

7,435

Expert 4TB

In ul.gallery, add overflow:auto;

I feel bad. The fix was easy but I thought your video link, above, was the actual page you were trying to fix and thought there was a lot more work involved.

Mar 15 '08 #14

GloStix

In ul.gallery, add overflow:auto;

I feel bad. The fix was easy but I thought your video link, above, was the actual page you were trying to fix and thought there was a lot more work involved.

Omg, I thought was gonna be complicated.
Thank you sooo much!

Also, Is there anyway I can make a scaled preview/thumbnail of the original image without changing the actual size of the css box or making a separate thumbnail one.

Mar 16 '08 #15

drhowarddrfine

7,435

Expert 4TB

Yes, but how would you use it? Do you mean a thumbnail that expands on hover or something to click on to expand or what? Some can be done with CSS, some with javascript.

Mar 16 '08 #16

GloStix

Yes, but how would you use it? Do you mean a thumbnail that expands on hover or something to click on to expand or what? Some can be done with CSS, some with javascript.

No no, nothing fancy. If you look at my thumbnails you'll see that they're stretched versions of the original pictures that they link to. I'm just asking for something that would show the preview of that image but scaled version so it's not stretched like replace empty space with just white... Because I don't exactly want to make a seperate scaled thumbnail version of each image I put up. maybe like a script that takes the link of the original image and displays it scaled to the dimensions.

I don't know if that's possible =\
I'm no master at this stuff.

Mar 16 '08 #17

drhowarddrfine

7,435

Expert 4TB

The sizes of the images are fixed in your html attributes for those images. If you look at the <img> tags, inside there is a height and width set. Changing that will change the sizes but they will be fixed at whatever you set them to.

Those sizes can be, and are supposed to be, in your CSS. If they are in CSS, then little tricks with hovering can be done. Otherwise, the only way to change the values is with javascript or by hand.

If you want to use javascript, you need to ask on that board.

Mar 16 '08 #18

GloStix

The sizes of the images are fixed in your html attributes for those images. If you look at the <img> tags, inside there is a height and width set. Changing that will change the sizes but they will be fixed at whatever you set them to.

Those sizes can be, and are supposed to be, in your CSS. If they are in CSS, then little tricks with hovering can be done. Otherwise, the only way to change the values is with javascript or by hand.

If you want to use javascript, you need to ask on that board.

Ohhhh Now I get it!
*slaps face*
I'm an idiot xD

I have 1 more quick question related to the thumbnails.
I now have:

I'm trying to get this.

I added this:
*HTML*

Expand|Select|Wrap|Line Numbers

 <li class="wide"><a href="media/art/HotRikkuSig2.gif" title="Rikku Forum Signature" target="_blank"> <img src="media/art/HotRikkuSig2.gif" alt="Rikku Forum Signature" width="207" height="65" border="0"/><span>Rikku Forum Signature</span></a></li>
 

and

*CSS*

Expand|Select|Wrap|Line Numbers

 
.wide {

    margin-top:50px;

    text-align:center;

}

Is it even possible? xD
I hate to keep bugging you guys on these little details. But I appreciate very much.

:)

Mar 17 '08 #19

drhowarddrfine

7,435

Expert 4TB

See if adding 'vertical-align:baseline' or 'middle' to .wide does it.

Mar 17 '08 #20

GloStix

See if adding 'vertical-align:baseline' or 'middle' to .wide does it.

Nope, unfortunately either of them don't work :(
I never knew about the vertical-alignment thing though.
Learnt something anyway :)

Mar 17 '08 #21

GloStix

Meh oh well, I just put some 's before the image and it made it go down...
Any other way? xD

Mar 18 '08 #22

GloStix

I think I need to state a height so the vertical alignment will work,

Mar 20 '08 #23

GloStix

hello >.>
I wonder why it's not working =\

Mar 22 '08 #24

heenakausar

hi,

apply your wide class to anchor tag as well...
because many a times classes applied outside the anchor tag doesnt get applied...
so try it out...
may be you'll get..

Mar 22 '08 #25

GloStix

I don't even have Anchor tags yet... Your telling me to put one for .wide?

or to put it related to the div it's in?

Mar 22 '08 #26

heenakausar

I don't even have Anchor tags yet... Your telling me to put one for .wide?

or to put it related to the div it's in?

u have posted this code
am talking about this

*HTML*
Code: ( text )

1.
<li class="wide"><a href="media/art/HotRikkuSig2.gif" title="Rikku Forum Signature" target="_blank"> <img src="media/art/HotRikkuSig2.gif" alt="Rikku Forum Signature" width="207" height="65" border="0"/>Rikku Forum Signature</a></li>

and

*CSS*
Code: ( text )

1.
.wide {
2.
margin-top:50px;
3.
text-align:center;
4.
}

Is it even possible? xD
I hate to keep bugging you guys on these little details. But I appreciate very much.

:)

Mar 24 '08 #27

GloStix

Oh I think I know what you mean... You want me to apply the class to the img instead of the list item?

Mar 24 '08 #28

by: juergen | last post by:

Hello In my application, I would like to display thumbnails of video-files (mpg, mpg2, avi, wmv..) (like in windows explorer (xp)) Is there a possibility to get the first, or one of the first...

.NET Framework

problem with different thumbnails opening same window

by: Danny | last post by:

hi, lately i've been working on a website and i have used a bit of javascript although i'm not an expert in this mather. On the page there are 3 thumbnails and when you click on a thumbnail a...

Javascript

Where IS the URL for a JavaScript Linked-to Video?

by: Nehmo | last post by:

When a page has a JavaScript "link" to a video, like http://www.msnbc.msn.com/id/10478942/ . How do you get the URL of the actual video? Isn't it in the source somewhere? -- )|:__ Nehmo __:|(

Javascript

Broken Float with Links and Text or Image

by: panachepad | last post by:

I arrived here from a websearch that found this thread from your archives: http://www.thescripts.com/forum/thread97805.html It helped me to understand that I am on the right track, but I still have...

HTML / CSS

How to publish HD video on Web and protect it?

by: Pallas | last post by:

Hi all, I've produced some high-def videos and I want people to be able to watch them on my website, but I may want to prevent downloads and I certainly want to prevent them from editing them....

HTML / CSS

3-column liquid layout? (for thumbnails)

by: FuzzyLogik | last post by:

http://phazm.net/csstest/index2.html I'm trying to make the thumbnails fit to the width of the page, so there are 3-4 in each row, but when you resize, I want it to basically flow with the page,...

HTML / CSS

Create thumbnails with clickable links XYZ

by: Krustov | last post by:

The question of how to create thumbnails with clickable links gets asked on this newsgroup every so often - like clock work . Just really posing this script here for google to archive it & so...

PHP

Overlaping time intervals calculations

by: Rombolt | last post by:

Hi I have a MSSQL table with many time intervals stored as datetime. Each time interval is also assigned a numeric type that specifies what type of job was done during the time interval. I need to...

Microsoft SQL Server

public headers

by: iesvs | last post by:

Hello, i want to create c++ libraries (for my use) but I don't know how I must do to have headers which contain only the public declarations. I used in C to put the private declarations in *.c...

C / C++

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

CSS Thumbnails and headers overlaping. Float Issue? [VIDEO LINK]

Similar topics