PDA

View Full Version : CSS pros...how to line this thing up?



wildviper
Jan 17th, 2009, 07:33 PM
Hi All,

I appreciate any help. I am coming up with blanks obviously. I am redesigning my site and trying to learn CSS and XHTML at the same time.

Here is the JPEG of the site that I am trying to code.

http://www.fotomango.com/mock-up/Mockup-2.jpg

Centered of course.

Here is where I am with the coding so far.

http://www.fotomango.com/mock-up/mockup_2.html

I am attaching the CSS file.

The issues are:


Get that blackbox to line up next to the slideshow
Somehow my menu doesn't work. I have put hrefs in
in IE 7, the menu block(i call it mid block), doesn't line up with footer
the "right" text which is floated is coming up one line below for some reason. Not in line with Center or the Left text.


I appreciate any guidance here.

Thanx

raja19
Jan 17th, 2009, 07:58 PM
i think its the float issue.

wildviper
Jan 17th, 2009, 08:59 PM
i think its the float issue.

Sorry, but what do you mean?

When I tried this without the slideshow script (replaced it with just an image), it seems to work good. I have looked at the javascript file and can't see anything there. Attached is the javascript file.


/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/mockup2_mid_pix.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/mockup2_mid_pix_2.jpg", "", ""] //image with link syntax
fadeimages[2]=["images/mockup2_mid_pix_3.jpg", "", ""] //image with link and target syntax
fadeimages[3]=["images/mockup2_mid_pix_4.jpg", "", ""]

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

wildviper
Jan 17th, 2009, 11:17 PM
Actually, I solved the image issue. Just created a Div container for the mid section and applied black as the background color! D'uh! Why didn't I think of this before..more efficient too. I solved the IE issue with the same solution!!!!! WooHoo...feel like a genius!

Now, on to the text alignment. Anyone know why the right text falls one line below?

Rowsdower!
Jan 18th, 2009, 12:24 AM
Your menu isn't working because of your text-indent. There is no link in the viewable page to hover over. You need to use a different approach to your menu.

Remove this part in red from your CSS:
#nav { float: left;
text-indent: -9999px;
width: 230px;
margin: 0px;
clear: both;
}

Change your resets to include this part in red:
*{margin:0;padding:0;border:0;} /* reset margins */

Add this to your CSS:
#nav ul li a {
line-height:38px;
display:block;
}

#nav h2 {
display:none;
}

#top_block {
width:1000px;
margin:0 auto;
background: black;
}

Use this HTML:
<!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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content=" Fotomango designs custom coffee table style photo books for weddings, events, family histories, and travel or vacation memories." />
<meta name="keywords" content="album,albums,artwork,babies,baby,binding,book,books,bound,bridals,budget,business events,candids,child,children,coffee,coffee table book,coffee table books,coffee table wedding album,coffee table wedding book,collage,community events,computer generated,corporate photos,couples,couples portraits,couple's shots,cover,creative,custom,custom design,custom layout,design,designer,designs,digital,digital album,display,elegant,engagements,engagments,event,families,family,flush mounted,fotography,golf tournaments,graphic,hard,hard bound,image,laser etched,layout,layouts,magazine,manipulation,montage book,page,personalized photo albums,photo,photogaphy,photografy,photograhy,photographers,photographs,photography,photogrpahy,phot ogrphy,photos,portraits,portraiture,potography,published,receptions,reunions,service,sports,story,st orybook,studios,style,stylish,table,template,templates,traditional albums,travel,vacation,vows renewals,wedding,wedding album coffee table book,wedding couples,wedding day portraits,wedding magazine,wedding photo,wedding photo coffee table books,weddings" />

<meta name="robots" content="index, follow" />

<title>Mockup 2 | FotoMango - Designing Custom Coffee Table Photo Albums</title>
<link href="newstyle.css" rel="stylesheet" type="text/css" />

<script language="javascript1.1" src="scripts/antispam.js" type="text/javascript"></script>
<script language="javascript1.1" src="http://www.fotomango.com/mock-up/scripts/fade.js" type="text/javascript"></script>

</head>

<body>
<div id="pagewrap"> <!-- Pagewrap Div -->
<div id="header"><img src="http://www.fotomango.com/mock-up/images/mockup2_header.jpg" alt="Logo header" />
</div>
<div id="top_block"> <!-- Open Top Block -->
<div id="nav">
<ul>
<li id="nav_about"><h2>About Us</h2><a href="aboutus.html"><img src="http://www.fotomango.com/mock-up/images/mockup2_mid_aboutus.jpg" alt="About Us"></a></li>
<li id="nav_whatwedo"><h2>What We Do</h2><a href="services.html"><img src="http://www.fotomango.com/mock-up/images/mockup2_mid_whatwedo.jpg" alt="What We Do"></a></li>
<li id="nav_gallery"><h2>Gallery</h2><a href="gallery.html"><img src="http://www.fotomango.com/mock-up/images/mockup2_mid_gallery.jpg" alt="Gallery"></a></li>
<li id="nav_faq"><h2>Questions</h2><a href="faq.html"><img src="http://www.fotomango.com/mock-up/images/mockup2_mid_faq.jpg" alt="Questions"></a></li>
<li id="nav_contact"><h2>Contact Us</h2><a href="contactus.html"><img src="http://www.fotomango.com/mock-up/images/mockup2_mid_contactus.jpg" alt="Contact Us"></a></li>
</ul>
</div>
<div id="slideshow">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 412, 195, 0, 3000, 0, "R")
</script>
</div>
</div> <!-- Close Top Block -->
<div id="top_content_bar"></div>
<div id="main_content_left">
<p id="left_text">I am testing Left</p>
<p id="center_text">Center</p>
<div id="right_floater">
<p id="right_text">Right</p>
</div>
</div> <!-- Main Content Div -->
<div id="bottom_content">
</div>
</div> <!-- Pagewrap Div -->

<div id="footer">
<br />Fotomango • 949-278-5105 • Email Us: • CA, USA
</div> <!-- Footer Div -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1636810-1";
urchinTracker();
</script>
</body>
</html>

This makes your page look nice in IE7. I can't test for FF where I am right now.

No advice yet on the line break with your right text, but you can also do this a better way instead of trying to fix what you have...

wildviper
Jan 18th, 2009, 03:06 AM
thanx for that. I think I solved the lining up issue the same way you did. I am testing your code and it seems that it works.

I checked it out in Firefox and IE. However, the menu seems to edge down a bit more than the slideshow or the red. Check it out here: http://www.fotomango.com/mock-up/mockup_3.html

I have put the red there just for testing purposes.

wildviper
Jan 18th, 2009, 05:30 AM
Ooops...I just tried to code this for sprites menu to get the rollover effect and no luck. Now the links is gone and can't even get the rollover effect.

Nevermind got that done