Stuck on few CSS issues mid-build
hi all,
spend last week making progress website build, i’ve hit few stumbling blocks hoped css pros out there might able please!
<div id="body_container">
i’ve tried setting div’s height 100% expands accordingly (set 800px right now), when ‘disappears’ view – i.e. background colour vanishes , contents appear on white background applied #body_container_fullwidth. ideas i’m doing wrong?
<div id="left_content">
why isn’t expanding in height accommodate youtube video? it’s height set 100%.
<hr class="leftcontent1"></hr>
i’m seeing in dreamweaver not in ff or ie preview. ideas?
<img class="rightbutton" src="images/right_button.png" width="24" height="24" alt="more" />
i’ve put image in <div id="right_content_greystrip"> container it’s appearing below , can’t work out why?
sorry it’s quite few issues @ once – i’ve been on each time , time again thoroughly stuck!
thanks in advance guys
---
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- templatebegineditable name="pagetitle" -->
<title></title>
<!-- templateendeditable -->
<link href="css/style_sheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setaccount', 'ua-17957242-1']);
_gaq.push(['_trackpageview']);
(function() {
var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s);
})();
</script>
</head>
<body>
<div id="logo_address_container_fullwidth">
<div id="logo_address_container">
<div id="logo_container"><a href="templates/test.com"><img src="images/thewharfhouse-logo.png" width="359" height="41" alt="the wharf house" /></a></div>
<div id="address_container">
<p class="headeraddress">over, gloucester, gl2 8db | 01452 332 900 | <a href="templates/www.test.com">enquiries@thewharfhouse.co.uk</a></p>
</div>
</div>
</div>
<div id="nav_container_fullwidth">
<div id="nav_container">
<p class="nav"><a href="templates/www.test.com">home</a> • <a href="templates/www.test.com">restaurant</a> • <a href="templates/www.test.com">accommodation</a> • <a href="templates/www.test.com">online shop</a> • <a href="templates/www.test.com">news & events</a> • <a href="templates/www.test.com">functions & weddings</a> • <a href="templates/www.test.com">local tourism</a> • <a href="templates/www.test.com">contact</a></p>
</div>
</div>
<div id="header_image_container_fullwidth">
<div id="header_image_container">
<!-- templatebegineditable name="header-image" --><img src="images/header-test.jpg" width="1100" height="350" alt="header test" /><!-- templateendeditable --></div>
</div>
<div id="body_container_fullwidth">
<div id="body_container">
<div id="body_container_left">
<div id="left_content">
<h1 class="leftcontent1">welcome wharf house</h1>
<hr class="leftcontent1"></hr>
<h2>welcome award winning waterside restaurant , accommodation, situated in on over edge of historic city of gloucester.</h2>
<p>welcome wharf house waterside restaurant rooms, set in perfect riverside location. sample our culipxary delights, have been awarded highly acclaimed red rosette aa or enjoy stay in our beautiful rooms awarded 4 stars aa.</p>
<p>each of our 6 bedrooms provide wonderful views of river severn, or our newly restored canal basin. rooms equipped wide-screen tv’s, walk in wifi, , private en suite facilities, whirl-pool baths.</p>
<p>all rooms include breakfast following morning. breakfast served between 7.30am-9.30am monday friday , 8.30am-9.45am saturday , sunday
(earlier if required @ supplement of £5 per room per half hour).</p>
<p>all profits made wharf house used promotion , restoration of herefordshire , gloucestershire canal trust.</p>
</div>
<div id="left_content">
<h1 class="leftcontent2">the wharf house video showcase</h1>
<div id="youtube">
<iframe width="380" height="214" src="http://www.youtube.com/embed/f8ut6qjimfe" frameborder="0" allowfullscreen></iframe>
</div>
<p>take inside wharf house restaurant , rooms in over, near gloucester, naration natasha turney @ restaurant.</p>
</div>
</div>
<div id="body_container_right">
<div id="right_content">
<h1 class="rightcontent">book stay</h1>
<img class="rightcontent" src="images/right_content_test.png" width="120" height="90" alt="test" />
<p>check availability , book stay in 1 of our luxurous individual rooms.</p>
<div id="right_content_greystrip">
<p class="right_content_greystrip"><a href="templates/test.com">check room availability</a></p>
<a href="templates/test.com"><img class="rightbutton" src="images/right_button.png" width="24" height="24" alt="more" /></a></div>
</div>
<div id="right_content">
<h1 class="rightcontent">over canal festival 2012</h1>
<img class="rightcontent" src="images/right_content_test.png" width="120" height="90" alt="test" />
<p>don’t miss on canal festival on saturday 1 , sunday 2 september 2012, featuring prunella scales , timothy west, heritage boat processions, fun on water, great food , drink, music , lots more!</p>
</div>
<div id="right_content">
<h1 class="rightcontent">christmas 2012 menus available now</h1>
<img class="rightcontent" src="images/right_content_test.png" width="120" height="90" alt="test" />
<p>turkey banned year @ wharf house, instead you’ll find tempting selection of courses sure please pickiest eater in party. plus, buffet menu available festive season.</p>
</div>
</div>
</div>
</div>
<div id="top-footer_container_fullwidth">
<div id="top-footer_container">
<p class="footertop">the wharf house, over, gloucester, gl2 8db | 01452 332 900 |<a href="templates/www.test.com"> enquiries@thewharfhouse.co.uk</a></p>
</div>
</div>
<div id="middle-footer_container_fullwidth">
<div id="middle-footer_container">
<div id="middle-footer_container_text">
<p class="footermiddle">awards , accolades</p>
</div>
<div id="middle-footer_container_awardsaccolades_img"><img src="images/aa-accommodation-logo.png" alt="aa 4 star guest accommodation" width="63" height="100" class="awardsaccolades" /></div>
<div id="middle-footer_container_awardsaccolades_img"><img src="images/aa-restaurant-logo.png" alt="aa rosette restaurant" width="64" height="100" class="awardsaccolades" /></div>
<div id="middle-footer_container_awardsaccolades_img"><img src="images/green-tourism-silver-logo.png" alt="silver green tourism" width="77" height="100" class="awardsaccolades" /></div>
<div id="middle-footer_container_text">
<p class="footermiddle">social media links</p>
</div>
<div id="middle-footer_container_socialmedia_img"><a href="https://www.facebook.com/thewharfhouse" target="_blank"><img src="images/facebook-logo.png" alt="facebook" width="109" height="41" class="socialmedia" /></a></div>
<div id="middle-footer_container_socialmedia_img"><a href="https://twitter.com/thewharfhouse" target="_blank"><img src="images/twitter-logo.png" alt="twitter" width="121" height="41" class="socialmedia" /></a></div>
</div>
</div>
<div id="bottom-footer_container_fullwidth">
<div id="bottom-footer_container">
<p class="footerbottom1"><a href="templates/www.test.com">home</a> • <a href="templates/www.test.com">restaurant</a> • <a href="templates/www.test.com">accommodation</a> • <a href="templates/www.test.com">online shop</a> • <a href="templates/www.test.com">news & events</a> • <a href="templates/www.test.com">functions & weddings</a> • <a href="templates/www.test.com">local tourism</a> • <a href="templates/www.test.com">contact</a></p>
<p class="footerbottom2">all profits wharf house used promotion , restoration of hereford , gloucester canal. © 2012.</p>
</div>
</div>
</body>
</html>
---
@charset "utf-8";
html {
min-height: 100%;
margin-bottom: 1px;
}
body {
background-color: #ffffff;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-right: 0px;
}
p {
font:arial, helvetica, sans-serif;
color: #666666;
font-size: 14px;
margin-bottom: 1.2em;
margin-top: 0em;
line-height: 1.4em;
text-align: left;
font-weight: normal;
margin-left: 15px;
margin-right: 15px;
}
p.headeraddress {
margin-bottom: 1.2em;
margin-top: 0em;
font:georgia, "times new roman", times, serif;
font-size: 15px;
text-align:left;
color: #666666;
}
p.nav {
margin-bottom: 1.2em;
margin-top: 0em;
font:georgia, "times new roman", times, serif;
font-size: 16px;
color: #fff;
text-align:center;
}
p.nav a:link {
color: #fff;
text-decoration: none;
}
p.nav a:visited {
text-decoration: none;
color: #fff;
}
p.nav a:hover {
color: #fff;
text-decoration: underline;
}
p.nav a:active {
color: #fff;
text-decoration: underline;
}
p.footertop {
margin-bottom: 1.2em;
margin-top: 0em;
font:georgia, "times new roman", times, serif;
font-size: 15px;
text-align:center;
color: #666666;
}
p.footermiddle {
margin-bottom: 1.2em;
margin-top: 0em;
font:georgia, "times new roman", times, serif;
font-size: 12px;
font-style: italic;
text-align:right;
color: #666666;
}
img.awardsaccolades {
display: block;
margin-left: auto;
margin-right: auto;
}
img.socialmedia {
display: block;
margin-left: auto;
margin-right: auto;
}
p.footerbottom1 {
margin-bottom: 1.2em;
margin-top: 0em;
font:georgia, "times new roman", times, serif;
font-size: 15px;
text-align:center;
color: #666666;
}
p.footerbottom2 {
margin-bottom: 1.2em;
margin-top: 0em;
font:georgia, "times new roman", times, serif;
font-size: 12px;
font-style: italic;
text-align:center;
color: #666666;
}
img {
border: 0px;
}
h1.leftcontent1 {
font:georgia, "times new roman", times, serif;
font-size: 24px;
color: #840000;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 0px;
font-weight:400;
}
h1.leftcontent2 {
font:georgia, "times new roman", times, serif;
font-size: 20px;
color: #666666;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
font-weight:400;
}
h1.rightcontent {
font:georgia, "times new roman", times, serif;
font-size: 20px;
color: #666666;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
font-weight:400;
}
img.rightcontent {
float:left;
margin-left: 15px;
margin-right: 12px;
}
#youtube {
float:left;
margin-left: 15px;
margin-right: 12px;
}
hr.leftcontent1 {
border: 1px;
width: 520px;
color: #840000;
height: 1px;
margin-left: 15px;
margin-top: 6px;
}
h2 {
font:georgia, "times new roman", times, serif;
font-size: 16px;
font-style:italic;
color: #666666;
margin-top: 0px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
font-weight:400;
}
a:link {
color: #840000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #840000;
}
a:hover {
color: #840000;
text-decoration: underline;
}
a:active {
color: #666666;
text-decoration: underline;
}
#logo_address_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color:#f1eace;
margin: auto;
padding-top: 35px;
}
#logo_address_container {
width: 960px;
height: 74px;
background-color:#f1eace;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#logo_container {
width: 359px;
height: 41px;
float:left;
padding-left: 20px;
}
#address_container {
width: 561px;
height: 20px;
float:left;
padding-left: 20px;
margin-top: 14px;
}
#nav_container_fullwidth {
width: 100%;
float:left;
background-color:#840000;
margin: auto;
padding: 0px;
}
#nav_container {
width: 960px;
height: 30px;
background-color:#840000;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#header_image_container_fullwidth {
width: 100%;
height: 350px;
float:left;
background-color:#f1eace;
margin: auto;
padding: 0px;
}
#header_image_container {
width: 1100px;
height: 100%;
background-color:#f1eace;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#body_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #fff;
margin: auto;
padding: 0px;
}
#body_container {
width: 960px;
height: 800px;
background-color:#f1eace;
margin-left: auto;
margin-right: auto;
padding: 0px;
margin-top: 20px;
margin-bottom: 0px;
}
#body_container_left {
width: 580px;
background-color:#f1eace;
float:left;
margin-left: 30px;
margin-top: 30px;
}
#body_container_right {
width: 290px;
background-color:#f1eace;
float:right;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
}
#left_content {
width: 580px;
height: 100%;
background-color:#fff;
box-shadow: 3px 3px 5px #999;
padding-top: 1px;
padding-bottom: 8px;
margin-bottom: 30px;
}
#right_content {
width: 290px;
height: 100%;
background-color:#fff;
box-shadow: 3px 3px 5px #999;
padding-top: 1px;
padding-bottom: 10px;
margin-bottom: 30px;
}
#right_content_greystrip {
width: 290px;
height: 24px;
background-color:#dfdfdf;
float:left;
}
img.rightbutton {
float:right;
}
p.right_content_greystrip {
margin-bottom: 1.2em;
margin-top: 0em;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
text-align:right;
padding-top: 1px;
margin-right: 5px;
}
p.right_content_greystrip a:link {
color: #840000;
text-decoration: none;
}
p.right_content_greystrip a:visited {
text-decoration: none;
color: #840000;
}
p.right_content_greystrip a:hover {
color: #840000;
text-decoration: underline;
}
p.right_content_greystrip a:active {
color: #840000;
text-decoration: underline;
}
#top-footer_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #e6d69c;
margin: auto;
padding: 0px;
font:georgia, "times new roman", times, serif;
padding-top: 20px;
}
#top-footer_container {
width: 960px;
height: 100%;
background-color:#e6d69c;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#middle-footer_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #f1eace;
margin: auto;
padding: 0px;
border-top: 1px solid #840000;
border-bottom: 1px solid #840000;
font:georgia, "times new roman", times, serif;
}
#middle-footer_container {
width: 960px;
height: 140px;
background-color:#f1eace;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#middle-footer_container_text {
width: 160px;
height: 40px;
margin-left: auto;
margin-right: auto;
float: left;
padding-top: 60px;
}
#middle-footer_container_awardsaccolades_img {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
float: left;
padding-top: 20px;
}
#middle-footer_container_socialmedia_img {
width: 130px;
height: 50px;
margin-left: auto;
margin-right: auto;
float: left;
padding-top: 48px;
}
#bottom-footer_container_fullwidth {
width: 100%;
height: 100%;
float:left;
background-color: #e6d69c;
margin: auto;
padding: 0px;
font:georgia, "times new roman", times, serif;
}
#bottom-footer_container {
width: 960px;
height: 75px;
background-color:#e6d69c;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
please upload files , post link.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment