Sat, 2013-11-16 09:05
Hi Guys,
Gave up on css for a while after having lost all my hair trying to deal with it.
Ready to try again.
Spent two days trying to get to the bottom of this problem below.
Any advice would be appreciated greatly.
I am trying to understand why the paragraph under the image does not align directly under the image.
Regards from Africa
Mike
<!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-GB"> <head> <title>The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." /> <meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." /> <meta name="robots" content="index, follow" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> </head> <body> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --> <p> <img border="0" src="images/class.jpg" width="720" height="480">Situated on the classic Vipingo Ridge Golf Resort overlooking the fourth green. Sunrise House is a state of the art home built to the highest standards. For a weekend away in one of the most peaceful surroundings you will find anywhere in Kenya please contact us for availability and prices.</p> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <!-- Text for left col --> <!-- Column 2 end --> </div> <div class="col3"> <!-- Column 3 start --> <div id="ads"> <!-- img for right col --> </div> <!-- Text for right col --> <!-- Column 3 end --> </div> </div> </div> </div> </body> </html>
css
style
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
/*
min-width:600px;
Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
background-color: #FFF;
background-attachment: fixed;
background-image: url('images/rub.jpg');
background-repeat: no-repeat
}
a {
padding-right: 5px;
padding-left: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-right-color: #D6D6D6;
border-bottom-style: solid;
border-bottom-color: #D6D6D6;
text-decoration: none;
font-weight: bold;
color: #666;
}
a:hover {
padding-right: 15px;
padding-left: 15px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #D6D6D6;
text-decoration: none;
font-weight: bold;
color: #A33F0B;
}
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/*
#ads img {
display:block;
padding-top:10px;
}
*/
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:0px solid transparent;
}
#header p,
#header h1,
#header h2 {
padding:1.4em 15px 0 25px;
margin:0;
}
/* 'widths' sub menu */
#layoutdims {
width:90%;
height: 10px;
clear:both;
background:transparent;
border-top:0px solid #000;
margin:0;
padding:6px 15px !important;
text-align:center;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background: transparent; /* right column background colour */
}
.threecol .colmid {
right:17%; /* width of the right column */
background: transparent; /* center column background colour */
}
.threecol .colleft {
right:66%; /* width of the middle column */
background: transparent; /* left column background colour */
}
.threecol .col1 {
width:62%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:13%; /* Width of left column content (column width minus padding on either side) */
left:23%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:13%; /* Width of right column content (column width minus padding on either side) */
left:93%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
.col1 p {
text-align: center;
padding-top: 20px; /*good*/
line-height:140%; /*good*/
width:70%; /*good*/
font-weight: bold; /*good*/
}
.col1 img {
text-align: center;
float: left;
margin-left: 0px;
margin-right: 40px;
margin-top: 20px;
margin-bottom: 30px;
border: 0px solid #696;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: #666 7px 7px 7px;
-moz-box-shadow: #666 7px 7px 7px;
box-shadow: #666 7px 7px 7px;
background: #FFF;
behavior: url(../pie/PIE.htc);
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:0px solid #000;
text-align:center;
}
#footer p {
padding:10px;
margin:0;
font-size:80%;
}
Sun, 2013-11-17 01:01
#1
Hi aussiemike, You are
Hi aussiemike,
You are aligning the text center, so each line of text trys to center itself.
Also the image has 30px of margin on the bottom.
Sun, 2013-11-17 06:14
#2
Layout
Hi Tony,
I remembered you helped me years ago.
How's Brisbane?
Haven't been there for years.
I remember it as a real nice city.
I am sure your profile picture needs updating also, they don't stay that size for ever.
Anyway thanks again for the help.
I have spent hours and hours looking at this problem and have cut all the code back to as little as I can and still cannot see the problem.
I have published the page and it just does not work as planned.
I can add padding here and there to get it all lined up but that is not the point of the exercise.
I just need to understand it.
Can you tell me why the nav menu and the footer are centred and the image and the image text below are not?
I also see that strictly speaking the text is not even centered with the image.
Might be a good idea for me to come back home,(Melbourne)and go back to school.
http://vipingosunrise.com/workbox/index1.htm
Cheers
Mike
P.S. My screen is 1280 x 960
Sun, 2013-11-17 22:33
#3
Hi Mike, Brisbane is
Hi Mike,
Brisbane is great.
Start by limiting the max-width of #wrapper to say 960px.
That should get the text under the image.
Looks like you have removed some of the columns so it should be simpler to work from there.
Tue, 2013-11-19 04:35
#4
Thanks again for the help
Thanks again for the help Tony.
Seems to work.
Will tinker some more to try and understand it better.
Regards
Mike