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

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • GloStix
    New Member
    • Feb 2008
    • 54
    #1

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

    WARNING VIDEO TAKES A WHILE TO LOAD
    TechSmith Screencast
    http://screencast.com/t/BWQ6DNtsM
    World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.


    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*
    Code:
     
<!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*
    Code:
     
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;
}
    Tags: None
    • nomad
      Recognized Expert Contributor
      • Mar 2007
      • 664
      #2
      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

        Comment

        • GloStix
          New Member
          • Feb 2008
          • 54
          #3
          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?

            Comment

            • GloStix
              New Member
              • Feb 2008
              • 54
              #4
              Bump. Any updates? anyone?

                Comment

                • GloStix
                  New Member
                  • Feb 2008
                  • 54
                  #5
                  You're probably avoiding me on purpose :(

                    Comment

                    • GloStix
                      New Member
                      • Feb 2008
                      • 54
                      #6
                      Come on guys, I need your help :(

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          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** ;)

                            Comment

                            • Markus
                              Recognized Expert Expert
                              • Jun 2007
                              • 6092
                              #8
                              Originally posted by GloStix
                              You're probably avoiding me on purpose :(
                              That's abit immature, isnt it?

                                Comment

                                • Michael7
                                  New Member
                                  • Sep 2007
                                  • 47
                                  #9
                                  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.

                                    Comment

                                    • GloStix
                                      New Member
                                      • Feb 2008
                                      • 54
                                      #10
                                      Originally posted by drhowarddrfine
                                      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 :)

                                        Comment

                                        • GloStix
                                          New Member
                                          • Feb 2008
                                          • 54
                                          #11
                                          Originally posted by markusn00b
                                          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.

                                            Comment

                                            • drhowarddrfine
                                              Recognized Expert Expert
                                              • Sep 2006
                                              • 7434
                                              #12
                                              Just to let you know I looked at that video. I thought the video WAS the site. I'll look into this after dinner.

                                                Comment

                                                • drhowarddrfine
                                                  Recognized Expert Expert
                                                  • Sep 2006
                                                  • 7434
                                                  #13
                                                  <meta> is only allowed in the <head>. Move them there.

                                                  Remove "language=Javas cript". No such thing or deprecated.

                                                  <p> cannot contain <ul>. Move the ending </p> up to the end of that <p>

                                                  <img> tags end with /> in xhtml.

                                                    Comment

                                                    • drhowarddrfine
                                                      Recognized Expert Expert
                                                      • Sep 2006
                                                      • 7434
                                                      #14
                                                      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.

                                                        Comment

                                                        • GloStix
                                                          New Member
                                                          • Feb 2008
                                                          • 54
                                                          #15
                                                          Originally posted by drhowarddrfine
                                                          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.

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...