Jump to content
UncleStef Mentoring Update: New SEO course!

Aligning Slideshow And Text

Zad

By Zad
in Beginners Web Design

 Share

Recommended Posts

Zad Newbie

Zad

Posted
Posted (edited)

I'm creating a site for a friend. The basic 2 column layout is shown in the attachment below. I would like to have the slideshow in the right column remain in exactly the same place from page to page. If the top paragraph length is changed (by removing or adding a line), it causes the slideshow to move up or down. How can I use CSS to prevent this?

 

Thanks!

post-15602-028641600 1299868119_thumb.gif

Edited by Zad
Link to comment
Share on other sites
pb1uk Newbie

pb1uk

Posted
Posted

Wrap div tags around the slideshow and absolutely position the div within the right hand side.

 

e.g.

<style>
#righthand{width:500px; position:relative; float:left; margin:0; padding:0;}
#slideholder{position:absolute; left:30px; top:100px; width:200px; height:200px;}
</style>

<div id="righthandside">

   <div id="slideholder">
          <!-- code for slideshow here -->
   </div>

</div>

 

Change to suit your needs.

 

Set the width and height to the width and height of the slideshow and the top and left accordingly to where you want the div to go in the page. Relative positioning is used on the righthand div.

Link to comment
Share on other sites
Zad Newbie

Zad

Posted
  • Author
Posted (edited)

First, thanks so much for your help PB1UK. I tried posting on another "beginning CSS" forum several days ago and no one responded :(

 

I'm still having trouble getting this to work. Here's my actual code - sorry it's such a mess; I'm still trying to make the transition from html to css;

 

Index page:

 

<!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">

<head>
<title>Matt's Place</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" type="text/css" href="styles.css" />

<style type="text/css">
a:link {color:#E2E2E2; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
a:visited {color:#E2E2E2; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
a:hover {color:#708090; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
a:active {color:#E2E2E2; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
</style>

<script type="text/javascript">
var revert = new Array();
var inames = new Array('nav_home-','nav_contact-','nav_bio-','nav_clients-','nav_listen-','nav_studio-');

// Preload
if (document.images) {
 var swap = new Array();
 for(i=0; i< inames.length; i++) {
   swap[i] = new Image();
   swap[i].src = "images/"+inames[i]+"2.jpg";
 }
}

function over(num) {
 if(document.images) {
   revert[num] = document.images[inames[num]].src;
   document.images[inames[num]].src = swap[num].src;
 }
}
function out(num) {
 if(document.images) document.images[inames[num]].src = revert[num];
}
</script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="fadeslideshow.js">
//<![CDATA[

/***********************************************
* Ultimate Fade In Slideshow v2.0- (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>
<script type="text/javascript">
//<![CDATA[

var mygallery=new fadeSlideShow({
       wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
       dimensions: [420, 260], //width/height of gallery in pixels. Should reflect dimensions of largest image
       imagearray: [
               ["images/record--351_420x260b.jpg"],
               ["images/gtr_1_420x260b.jpg"],
               ["images/at_piano_420x260b.jpg"],
               ["images/u87_420x260b.jpg"],
       ["images/gtr+caseb.jpg"] //--no trailing comma after very last image element!
       ],
       displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
       persist: false, //remember last viewed slide and recall within same session?
       fadeduration: 1500, //transition duration (milliseconds)
       descreveal: "none",
       togglerid: ""
})

</script>

</head>

<body>
<!-- Begin Wrapper -->
<div id="wrapper">

<!--Layout courtesy <http://www.free-css.com/free-css-layouts.php> Free CSS Layouts -->

<!-- Begin Left Column -->
<div id="leftcolumn"><img src="images/at_bd_insert.jpg" width="224" height="295" alt="" /><br />

<!-- Begin Menu -->
<div id="nav"><a href="index.html"><img src="images/nav_home-1.jpg" name="nav_home-" onMouseOver="over(0)" onMouseOut="out(0)" border="0"></a>
<br />
<a href="bio.html"><img src="images/nav_bio-1.jpg" name="nav_bio-" onMouseOver="over(2)" onMouseOut="out(2)" border="0"></a>
<br />
<a href="clients.html"><img src="images/nav_clients-1.jpg" name="nav_clients-" onMouseOver="over(3)" onMouseOut="out(3)" border="0"></a>
<br />
<a href="listen.html"><img src="images/nav_listen-1.jpg" name="nav_listen-" onMouseOver="over(4)" onMouseOut="out(4)" border="0"></a>
<br />
<a href="studio.html"><img src="images/nav_studio-1.jpg" name="nav_studio-" onMouseOver="over(5)" onMouseOut="out(5)" border="0"></a>
<br />
<a href="contact.html"><img src="images/nav_contact-1.jpg" name="nav_contact-" onMouseOver="over(1)" onMouseOut="out(1)" border="0"></a><br />
</div>
<!-- End Menu -->

</div>
<!-- End Left Column -->

<!-- Begin Right Column -->
<div id="rightcolumn">
<h1>Matt's Place</h1>
<br />
<h2>Mauris Malesuada Erat In Ipsum</h2>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget risus at ligula ultrices commodo. Curabitur porttitor pellentesque urna eu varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sed elit ante, eu tempus elit. Suspendisse dictum consequat sapien quis ornare. Proin metus justo ferme.</p>
<br />
<p>Integer elit eros, tempus in tincidunt lobortis, pulvinar id est. Nullam accumsan lorem in erat semper at pulvinar augue suscipit. Quisque dapibus euismod risus, in convallis erat pellentesque non. Fusce semper nunc nulla, sit amet accumsan velit. Suspendisse potenti. Proin aliquet iaculis dolor, a lobortis libero mattis eu. Suspendisse convallis pulvinar orci, at sollicitudin est hendrerit at. Maecenas ligula nunc, viverra eu interdum eu, egestas eget diam. Phasellus in quam at massa lobortis luctus at tortor Integer elit eros.</p>
<br />

<!-- Begin Slideshow -->
<div id="fadeshow1"></div>
<!-- End Slideshow -->
</div>

<!-- End Right Column -->

<!-- Begin Footer -->
<div id="footer"> <p style="text-align: center;">Copyright © 2011 Matt's Place</p></div> -->
<!-- End Footer -->

<!-- End Wrapper --></div>
</body>
</html>

CSS:

 

* { padding: 0; margin: 0; }

body {
background:#000000;
}

#wrapper { 
margin: 0 auto;
width: 922px;
position: relative;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
line-height: 1.5;
letter-spacing: .25px;
text-align: left;
}

h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 20px;
   font-weight: bold;
   color: #ffffff;
   letter-spacing: 1.4px;
text-align: center;
}

h2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: normal;
   color: #ffffff;
letter-spacing: 1.2px;
text-align: center;
}

#leftcolumn {
margin: 0px 0px 0px 0px;
padding: 10px;
height: 700px;
width: 250px;
float: left;
}

#nav {
margin: 25px 0px 0px 30px;
padding: 10px;
width: 250px;
float: left;
}

#rightcolumn {
float: right;
position: relative;
background-image: url("images/jh-24_stretch2.jpg");
background-repeat: no-repeat;
background-position: 14px 20px;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 700px;
width: 600px; 
}

#rightcolumn-2 { 
float: right;
position: relative;
background:#000000;
margin: -100px 0px 0px 0px;
padding: 10px;
height: 700px;
width: 600px;
}

#fadeshow1 {
border: 9px double #999;
position:absolute; left:75px; top:15px; width:422px; height:262px;
}

#footer { 
width: 900px;
clear: both;
color: #FFFFFF;
background-color:#000000;
margin: 0px 0px 10px 0px;
padding: 10px;
}

Edited by Zad
Link to comment
Share on other sites
pb1uk Newbie

pb1uk

Posted
Posted

In the following change top to 310px;

 

#fadeshow1 {
border: 9px double #999;
position:absolute; left:75px; top:15px; width:422px; height:262px;
}

 

If you use firefox get a plug in called firebug. Means could can look at code how it's displayed in the browser and change it in real time to see how it looks. If you don't use firefox and firebug at the moment i would strongly recommend doing it. It will help you find out a lot of problems very easily

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...