PDA

View Full Version : Layout mess with tiltviewer


WotNow
07-18-2009, 04:22 AM
Hi! having a little trouble with my floats/layout. If I don't add a clear both to my tilt div, my layout works but the tilt image viewer will not allow you to click on one of the images to enlarge as it does now. Have tried moving things around in the source order and getting into deeper trouble. If anyone can sort this I would be soooo grateful, thanks


http://kimberleywebdesign.com.au/NewDesign/NewDesignPage2.html

domedia
07-19-2009, 06:23 PM
Not sure exactly how you're envisioning this, but if you want this to be a 3 column layout, try add a width to #navigation-block.

WotNow
07-20-2009, 12:23 AM
Hi thanks for reply. Yes want three column layout with a div underneath that spreads the whole width of the page.

WotNow
07-20-2009, 12:27 AM
Forgot to mention, I thought if you wanted divs to stack next to each other rather than underneath, that you had to float all 3 divs and then use margins to position them. With floats you have to define width? Its the clearing I have trouble with. Do I wrap all 3 divs in a container and the last div that I want to go underneath not in the container that the 3 divs are in? Hope this makes sense.

DWcourse
07-20-2009, 02:13 AM
For a 3-col layout place divs in this order:

#container holds everything and sets the over all width.

float #left left with a width.

float #right right with a width.

Don't float #center and don't give it a width BUT do give it left and right margins equal to with of appropriate sidebar plus some space for the "gutters"

Place a clearing element with property clear: after the close of the #center div.

Place your full width div after the clearing element and before the close of #container. It shouldn't need a width or margins.

DWcourse
07-20-2009, 02:17 AM
Whoops! If you want the bottom div to spread the width of the page, place it OUTSIDE #container.

domedia
07-20-2009, 02:56 AM
I always set width and float to all three columns. Can't remember why but I've done it on a load of sites. As always there's more than one way to achieve something with CSS/HTML ;-)

DWcourse
07-20-2009, 03:19 AM
As always there's more than one way to achieve something with CSS/HTML ;-)
Except for those times when it seems there's not even one way!

WotNow
07-20-2009, 03:30 AM
Ok got all that except the bit about the clear. Place a clearing element with property clear: after the close of the #center div. I assume I dont put clear:both in the centre div css, ie #image is my centre div

CSS
#image {
margin:50px 240px 0 280px;
padding:0;
background:#ccc;
clear:both;}
HTML
<div id="image">
<img src="ClickHereSmall.gif" alt="Click Here Image" width="250" height="215" />
</div><!--end of image-->

Not exactly sure where to put that clear. Maybe you mean apply class clear applied to image, sorry all a bit of muddle. Thanks!

DWcourse
07-20-2009, 03:56 AM
Dreamweaver's built in layouts use this style:

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

And then use <br class="clearfloat" /> as the clearing element.

Place it after the last of the three columns so the height of #container will stretch to hold them. The close the #container div.

WotNow
07-20-2009, 04:20 AM
Hi! Have placed clear where you suggested but #navigation is still not level with the other two divs #img and #sidebar. This is my code:

<body>
<div id="header">
<h1>Services</h1>
</div><!--end of header-->



<div id="container">
<div id ="sidebar">
<h1>E.Query</h1><!--opens their mail editor-->
<p>Email Us</p>

<form action=""http://www.westnet.com.au/scripts/formmail/formmail.asp"" method="get" name="EQuote">
<INPUT type="hidden" name="recipient" value="enquiries@kimberleywebdesign.com.au">
<INPUT type="hidden" name="redirect" value="http://www.kimberleywebdesign.com.au/index.html">
<table width="250" border="0" cellspacing="0" cellpadding="0">
<caption>
E-Quote
</caption>
<tr>
<td><label for="Visuals">Do you have your own visuals?</label></td>
<td><input type="radio" name="Visuals" value="Yes" id="Visuals" />
Yes
<input type="radio" name="Visuals" value="No" id="Visuals" />
No<br />
</td>
</tr>

<tr>
<td><label for="Copy">Do you have your own copy/text?</label></td>
<td><input type="radio" name="Copy" value="Yes" id="Copy" />
Yes
<input type="radio" name="Copy" value="No" id="Copy" />
No<br />
</td>
</tr>

<tr>
<td><label for="DomainName">Do you have your own Domain Name?</label></td>
<td><input type="radio" name="Domain" value="Yes" id="Domain" />
Yes
<input type="radio" name="Domain" value="No" id="Domain" />
No<br />
</td>
</tr>

<tr>
<td><label for="DomainName">Would you like a Google Map?</label></td>
<td><input type="radio" name="GoogleMap" value="Yes" id="GoogleMap" />
Yes
<input type="radio" name="GoogleMap" value="No" id="GoogleMap" />
No<br />
</td>
</tr>
<tr>
<td><label for="Slideshow">Would you like the slideshow feature?</label></td>
<td><input type="radio" name="Slideshow" value="Yes" id="Slideshow" />
Yes
<input type="radio" name="Slideshow" value="No" id="Slideshow" />
No<br />
</td>
</tr>
<tr>
<td><label for="Form">Would you like a client form?</label></td>
<td><input type="radio" name="Form" value="Yes" id="Form" />
Yes
<input type="radio" name="Form" value="No" id="Form" />
No<br />
</td>
</tr>
<tr>
<td><label for="Pages">How many pages do you need?</label></td>
<td>
<select name="PageNum" id="PageNum">
<option selected="selected">Select from Menu</option>
<option value="one">One Page</option>
<option value="two">Two Pages</option>
<option value="three">Three Pages</option>
<option value="four">Four Pages</option>
<option value="five">Five Pages</option>
<option value="six">Six Pages</option>
<option value="more">More</option>
</select>
</td>
</tr>
</table>

<p>&nbsp;</p>
</form>
<!--Do you need KWD to take your visuals, write your copy, create a site, register a domain name, analyse your web traffic, google map, flash header, client forms, e-commerce-->
</div><!--end of sidebar-->


<div id="image">
<img src="ClickHereSmall.gif" alt="Click Here Image" width="250" height="215" /></div>
<!--end of image-->




<div id="navigation-block">
<!--<img src="Images/background.jpg" alt="background image" />
<h2><span>Navigation Effect Using jQuery</span></h2>-->

<ul id="sliding-navigation">
<!--<li class="sliding-element"><h3>Navigation Title</h3></li>-->
<li class="sliding-element"><a href="#">Web Design and Development</a></li>
<li class="sliding-element"><a href="#">Visuals</a></li>
<li class="sliding-element"><a href="#">Copy</a></li>
<li class="sliding-element"><a href="#">Web Hosting</a></li>
<li class="sliding-element"><a href="#">Site Support and Maintenance</a></li>
</ul>
</div><!--end of navigation-block-->

<br class="clearfloat" />
</div><!--end of container-->
<div id = "mainContent">

Thanks for all your help

WotNow
07-20-2009, 04:23 AM
Sorry forgot to mention. Have I placed the 3 divs in the right order in the source code. I.e if I want the nav on the left, the image in the centre and the sidebar on the right. So I put the sidebar first, the image 2nd and the nav 3rd??

DWcourse
07-20-2009, 04:31 AM
need to see the css as well. any chance of posting the page again?