squemish

Author Topic: clear:both  (Read 2903 times)

christynne

  • Guest
clear:both
« on: February 28, 2014, 02:45:49 am »
http://christynne.com/aksca/index.php

Please see screen shot. This issue I am having is that the leftcontainer and rightcontainer load under the gallery. When you refresh the page, the issue is solved. I have a clear:both after the gallery, but it is not working. Any tips? This has happened in another website. I have a feeling it has something to do with the gallery because I had a temporary banner in place (same size as gallery photos) and I didn't have this issue.

Thanks!

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: clear:both
« Reply #1 on: February 28, 2014, 06:14:07 am »
Hi Christynne,

Have you tried placing the rightcontainer and leftcontainer divs inside of the one with the clear both style:

<div style="clear:both; margin-top:40px;"></div>

You should be able to use margins or relative positioning to bring down the div far enough for the containers to show. If you continue to have difficulty upload a zip file with all of your files so that I can test it. Thanks.
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

christynne

  • Guest
Re: clear:both
« Reply #2 on: February 28, 2014, 04:50:34 pm »

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: clear:both
« Reply #3 on: March 01, 2014, 07:15:32 am »
All of your files are read-only so I cannot view from my local Apache server. Sorry. Maybe a Mac to PC problem?
« Last Edit: March 01, 2014, 07:21:49 am by JennaSetticasi »
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

christynne

  • Guest
Re: clear:both
« Reply #4 on: March 02, 2014, 04:13:08 am »
Strange. I have never had that problem when sharing files before. Maybe it does have something to do with the MAC to PC.

Try this: https://www.dropbox.com/sh/5cvwwhwbzvp1tks/U8VZriIUZH

I gave you the necessary files. I put the index and css in a rich text format. Just in case that doesn't work either, the codes are below.

INDEX
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Alaska Sporting Clays Association - Shooting in the Far North</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
      $('#gallery').cycle({
       fx: 'fade',
      });
 }); //end document ready
</script>




</head>

<body>


<?php @include ('header-inc.php');?>

<div style="clear:both; margin-top:80px;"></div>

<div id="wrapper">

<div id="gallery">
 <div><img src="web_photos/1.jpg" /></div>
 <div><img src="web_photos/3.jpg" /></div>
 <div><img src="web_photos/2.jpg" /></div>
 <div><img src="web_photos/4.jpg" /></div>
 <div><img src="web_photos/6.jpg" /></div>
 
</div><!--gallery-->

 <div style="clear:both; margin-top:40px;"></div>
 <div id="leftcontainer">
<div style="clear:both"></div>
<p> <strong style="font-weight:bold; padding-right:10px; font-size:26px">SHOOTING IN THE FAR NORTH</strong>  The mission of the AKSCA is “to promote and govern the sport of sporting clays throughout the State of Alaska in a way which is beneficial to all who enjoy and participate in the game. The AKSCA is dedicated to the development ofthe sport at all levels of participation. AKSCA vows to create an atmosphere of healthy and safe competition and meaningful fellowship within its membership.”</p>
</div>


<div style="margin-right:20px;" id="rightcontainer">
<div style="clear:both"></div>
<table width="403" border="0" cellspacing="10" cellpadding="5">
  <tr>
    <td><a href="results.php" border="0"><img src="web_photos/sresultsQL403x72.jpg" alt="shooting results"/></a></td>
  </tr>
  <tr>
    <td><a href="calendar.php" border="0"><img src="web_photos/eventsQL403x72.jpg" alt="upcoming events"/></a></td>
  </tr>
  <tr>
    <td><a href="regforms.php" border="0"><img src="web_photos/regforms403x72.jpg" alt="registration forms"/></a></td>
  </tr>
</table>

</div>


</div><!--wrapper-->

<div style="clear:both; padding-top:30px;"></div>

<?php @include ('footer-inc.php');?>
</body>
</html>


CSS
@charset "UTF-8";
/* CSS Document */


body{
   background-image:url(web_photos/bodybkgd.jpg);
   background-repeat:repeat;
   margin:0; padding:0;
}

#head{
   background-image:url(web_photos/headerbkgd210h.jpg);
   background-repeat:repeat;
   max-height:215px;
      
}

#wrapper{
   width:1000px;
   margin-left:auto;
   margin-right:auto;

}

#content{
   background-color:#FFFFFF;
   padding:20px;
   min-height:600px;
}

#nav{
   background-image:url(web_photos/navbkgd.jpg);
   background-repeat:repeat-x;
   height:50px;
}

#nav ul{
   list-style-type:none;
   margin:0;
   padding-top:15px;
}

#nav li {
   display:inline;
   color:#ffffff;
   /*margin-left:auto;
   margin-right:auto;
   width:1000px;*/
   padding-right:45px;

}

#leftcontainer{
   float:left;
   width:552px;
   height:278px;
   background-color:#fff;
}

#rightcontainer{
   float:right;
   width:400px;
   margin-top:-10px;
}

p{
   font-size:20px;
   font-family: 'Roboto Condensed', sans-serif;
   font-weight:300;
   margin:15px;
}

h1, h3, h2{
       font-family: 'Roboto Condensed', sans-serif;
      font-weight:bold;
}

h3{
   font-size:22px;
   color:#333333;
}

h2{
   color:#333366;
}

a.style1:link {color:#ffffff; text-decoration:none;}
a.style1:visited {color:#ffffff; text-decoration:none;}
a.style1:hover {color:#ffffff; text-decoration:underline;}
a.style1:active {color:#ffffff; text-decoration:none;}


HEADER INCLUDE
<div id="head">
<center><a href="index.php"><img style="padding-top:30px;" src="web_photos/logo.png" border="0"/></a></center>
<div style="clear:both; padding-top:15px "></div>
<div id="nav">
<ul>
   <!--<a class="style1" href="index.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:24px; padding-left:5px;">HOME</li></a>-->
   <center>
    <a class="style1" href="results.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">RESULTS</li></a>
   <a class="style1" href="registration.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">REGISTRATION</li></a>
    <a class="style1" href="calendar.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">CALENDAR</li></a>
    <a class="style1" href="delegates.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">DELEGATES</li></a>
    <a class="style1" href="about.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">ABOUT</li></a>
    <a class="style1" href="gallery.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">GALLERY</li></a>
        <a class="style1" href="recognition.php"><li style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px;">RECOGNITION</li></a>
    </center>
</ul>
</div><!--nav-->




</div><!--head-->

FOOTER INCLUDE


<div id="footer">
<p style="font-size:16px; text-align:center;">Alaska Sporting Clays Association &copy; 2014 | Web Services by Christynne Ashleigh Design Studio, LLC</p>
</div>



JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: clear:both
« Reply #5 on: March 02, 2014, 06:54:08 am »
Thanks, Christynne. When I look at your files (with header and footer, and gallery in place) I don't see the problem, but I do see it in the link that you posted. Maybe try setting a height on the gallery div? You could also try clear:both; on it and try giving it a bottom margin instead of applying that to the div below. Sorry I can't help more but I can't seem to reproduce the problem.
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: clear:both
« Reply #6 on: March 02, 2014, 06:56:15 am »
I did a view source on the http://christynne.com/aksca/index.php page and the code looks different than the files you gave me. I don't see the margin-top property on the div below the gallery, for example. Try updating your files on the server.
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

christynne

  • Guest
Re: clear:both
« Reply #7 on: March 02, 2014, 10:27:20 pm »
Nothing worked. :(

I have a similar set up here: http://www.judypatrickphotography.com/ and it is doing the same thing.

Any advice? Other coding options for a simple gallery?

I have another similar gallery here and have no issues: http://grouseridge.com/

christynne

  • Guest
Re: clear:both
« Reply #8 on: March 02, 2014, 10:33:22 pm »
Figured it out. I added the following code to the gallery div:

#gallery {
            width:1000px;
          height:300px;
        margin-left:auto;
        margin-right:auto;
       
       
   
    }

    #gallery img {
          width:1000px;
          height:300px;
        padding:0px;
       
    }


Worked like a charm! Thank you  ;)

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: clear:both
« Reply #9 on: March 03, 2014, 06:08:10 am »
Wonderful Christynne, I am glad that you were able to resolve the issue!
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media