CSS issues - centering divs, floats, & margins
OK,
Have my CSS with wrapper....several different divs. My issue
was centering a div, then centering a div below it, so I used
margin-left:auto and margin-right:auto. I also have another div
that SHOULD reside on the right side of the page, however, it has a
float:right, so I know that the auto margins will push the right
floated div below where I want it to reside.
Here's the CSS code:
html,body {
margin-left: 0px;
margin-right: 0px;
background:;
#wrapper {
font-family:Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-style: normal;
line-height: normal;
color: #000000;
height: px;
width: 760px;
left:50%;
top:75px;
margin:0 auto 0 auto;
#toprule {
float:left;
width: 725px;
padding-left:15.5px;
padding-right:15.5px;
height: 6px;
border:#00000;
border-style:solid;
background:none;
#leftrule {
float:left;
width: 6px;
height: 600px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
margin-top: 75px;
#topbanner
width: 686px;
height: 136px;
margin-left:auto;
margin-right:auto;
margin-top:25px;
border:#000000;
border-style:solid;
border-size:1px;
background:#000000;
#rightrule
float:right;
width: 6px;
height: 600px;
margin-top:75px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#topmenu
width: 623px;
height: 26px;
margin-left:auto;
margin-right:auto;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#lowermenu
float:left;
width: 325px;
height: 124px;
margin-top:30px;
margin-left:40px;
border:#000000;
border-style:solid;
border-size:1px;
background:none;
#images
float:right;
width: 306px;
height: 306px;
border:#000000;
margin-top:30px;
margin-right:30px;
border-style:solid;
border-size:1px;
background: none;
#content
float:left;
width:325px;
height:177px;
margin-left:40px;
margin-top:15px;
border:#000000;
borderstyle:solid;
border-size:1px;
background:none
#footer
width: 686px;
height: 73px;
border:#000000;
margin-top:15px;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-size:1px;
background:none;
and the HTML code
<!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" />
<title>Welcome to EB's Food</title>
<link href="ebsfoods.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="wrapper">
<div id="toprule"></div>
</div>
<div id="leftrule">leftrule</div>
<div id="topbanner">topbanner</div>
<div id="rightrule">rightrule</div>
<div id="topmenu">
<div align="left">topmenu</div>
</div>
<div id="lowermenu">lowermenu</div>
<div id="images">images</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
Assistance greatly appreciated.......
David Bird
BTW,
The "lowermenu" and "content" are supposed to line up with
the left edge of the "topbanner" and the "images" is supposed to
line up with the right edge of the "topbanner". The footer is the
same size as the topbanner and is supposed to be centered.
db
This is a bit confused, as is your CSS. What is it you are
trying to
accomplish?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"mobirdman" <[email protected]> wrote in
message
news:[email protected]...
> OK,
> Have my CSS with wrapper....several different divs. My
issue was centering
> a
> div, then centering a div below it, so I used
margin-left:auto and
> margin-right:auto. I also have another div that SHOULD
reside on the right
> side
> of the page, however, it has a float:right, so I know
that the auto
> margins
> will push the right floated div below where I want it to
reside.
>
> Here's the CSS code:
>
> html,body {
>
> margin-left: 0px;
> margin-right: 0px;
> background:;
> }
>
> #wrapper {
> font-family:Georgia, Times New Roman, Times, serif;
> font-size: 14px;
> font-style: normal;
> line-height: normal;
> color: #000000;
> height: px;
> width: 760px;
> left:50%;
> top:75px;
> margin:0 auto 0 auto;
>
> }
>
> #toprule {
> float:left;
> width: 725px;
> padding-left:15.5px;
> padding-right:15.5px;
> height: 6px;
> border:#00000;
> border-style:solid;
> background:none;
> }
>
> #leftrule {
> float:left;
> width: 6px;
> height: 600px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> margin-top: 75px;
> }
>
> #topbanner
> {
>
> width: 686px;
> height: 136px;
> margin-left:auto;
> margin-right:auto;
> margin-top:25px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:#000000;
>
>
> }
>
> #rightrule
> {
> float:right;
> width: 6px;
> height: 600px;
> margin-top:75px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #topmenu
> {
>
> width: 623px;
> height: 26px;
> margin-left:auto;
> margin-right:auto;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #lowermenu
> {
> float:left;
> width: 325px;
> height: 124px;
> margin-top:30px;
> margin-left:40px;
> border:#000000;
> border-style:solid;
> border-size:1px;
> background:none;
> }
>
> #images
> {
> float:right;
> width: 306px;
> height: 306px;
> border:#000000;
> margin-top:30px;
> margin-right:30px;
> border-style:solid;
> border-size:1px;
> background: none;
> }
>
> #content
> {
> float:left;
> width:325px;
> height:177px;
> margin-left:40px;
> margin-top:15px;
> border:#000000;
> borderstyle:solid;
> border-size:1px;
> background:none
> }
>
> #footer
>
> {
>
> width: 686px;
> height: 73px;
> border:#000000;
> margin-top:15px;
> margin-left:auto;
> margin-right:auto;
> border-style:solid;
> border-size:1px;
> background:none;
>
> and the HTML code
>
> <!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" />
> <title>Welcome to EB's Food</title>
> <link href="ebsfoods.css" rel="stylesheet"
type="text/css" />
> </head>
>
> <body>
> <div id="wrapper">
> <div id="toprule"></div>
>
> </div>
> <div id="leftrule">leftrule</div>
> <div id="topbanner">topbanner</div>
> <div id="rightrule">rightrule</div>
> <div id="topmenu">
> <div align="left">topmenu</div>
> </div>
> <div id="lowermenu">lowermenu</div>
> <div id="images">images</div>
> <div id="content">content</div>
> <div id="footer">footer</div>
> </body>
> </html>
>
> Assistance greatly appreciated.......
>
> David Bird
>
Similar Messages
-
Double Float Margin Bug "error"
I did a browser compatibility check on one of the pages that
I am building and got this error.............
"Line 112, Double Float Margin Bug 'error'
When a margin is applied to a floated box on the same side as
the direction of the float, the margin is doubled. This bug only
affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely"
I have many thumbnails for a gallery page in their own divs,
within the content div, and they are floated in there.
When I viewed solutions, they suggested:
"When a margin is applied to a floated box on the same side
as the direction the box is floated AND the floated box is the
first one inside its containing box, the margin is doubled. (In
other words, a left-floated box with margin-left set to move it
away from its containing box will be twice as far away from the
left edge of the containing box as intended.)
SOLUTION
Specify display: inline; for the affected float.
DETAILED DESCRIPTION
This bug only reproduces when the floated element's margin
extends in the same direction as the float itself, and is between
the float and the container box's inside edge. Subsequent floats
with similar margins won't reproduce this bug- just the first float
in any row of floated elements."
Does anyone have any solutions, suggestions as how to fix
this? I will attach my code. And if anyone has a better solution as
to laying my thumbnail divs in another div container, please say
so. The reason I am putting them in separate divs is because that
is what someone suggested to use them with Lightbox2. He said they
needed some kind of special CSS to enable some of the functions and
they (the thumbnails) were easier to style if they were in their
own separate divs. I'm open for any suggestions.
Thanks!Just add "display:inline" to the styling like this:
.image {
background-color: #121922;
height: 100px;
width: 100px;
float: left;
margin: 20px;
display: inline;
} -
Background image seems to be applied twice Can someone help with this CSS issue....
Can someone help with this CSS issue....
http://66.162.81.144/cms400min/default.aspx
If you view the main page you will see that our background is
2 shades of
orange.. if you look at the line that divides those colors to
the right and
left you wil notice that the line is higher
if you notice that it seems that there is another background
on top of the
first one..its the only thing i can think of..
the only place where the image is being referenced is in this
CSS style
html, body
min-height:100%;
margin-bottom:1px;
text-align:center;
background-repeat:no-repeat;
background-image:url(images/Background-Color2.jpg);
background-color:#F74902;
background-position:center;
background-attachment:fixed;
Is there something wrong with the above CSS that could or
would cause this?
is it because im applying the image to both the HTML and
BODY?
ASP, SQL2005, DW8 VBScript, Visual Studio 2005, Visual Studio
2008You've attached the background to both the html and the body.
I would do this:
html, body {
min-height:100%;
margin-bottom:1px;
body{
text-align:center;
background-repeat:no-repeat;
background-image:url(images/Background-Color2.jpg);
background-color:#F74902;
background-position:center;
background-attachment:fixed;
Having said that the image doesn't look any higher on the
right than the
left to me in Firefox. Is it just an optical illusion?
Daniel wrote:
> Can someone help with this CSS issue....
>
>
http://66.162.81.144/cms400min/default.aspx
>
> If you view the main page you will see that our
background is 2 shades of
> orange.. if you look at the line that divides those
colors to the right and
> left you wil notice that the line is higher
>
> if you notice that it seems that there is another
background on top of the
> first one..its the only thing i can think of..
>
> the only place where the image is being referenced is in
this CSS style
>
> html, body
>
> {
>
> min-height:100%;
>
> margin-bottom:1px;
>
> text-align:center;
>
> background-repeat:no-repeat;
>
> background-image:url(images/Background-Color2.jpg);
>
> background-color:#F74902;
>
> background-position:center;
>
> background-attachment:fixed;
>
>
> }
>
> Is there something wrong with the above CSS that could
or would cause this?
> is it because im applying the image to both the HTML and
BODY?
> -
Urgent CSS issue in Safari! LIVE site *****
A site I recently wrapped up was working great in all
browsers, and for some reason I hopped on Safari today and noticed
it's not formatting right at all! I'm not sure where the issue is
as it was hunkey dorey before, and am hoping somebody on here might
know so I can fix it quickly before there are complaints from
people browsing to the site.
http://www.mackinnonicehorse.com
Anybody have any ideas? If you look at it in other browsers
you'll see how the navigation should be, and there are some other
small CSS issues in Safari that I'm seeing. It was working fine
though… ideas? Please help!Never mind… there was ONE little mistake in my
stylesheet that I fixed and BAM - everything back to normal.
PHEW!!! :) -
ALL,
I have a problem in URL of images in CSS. in the CSS, URL for the images. so we have checked-in the content server. we have given the url path in the css. URL would would look */idc/groups/public/documents/cp_images/imagename.gif*. offcource I have checked-in the CSS in the content server. images from content server appering in the site studio designer preview as well as the browser.
But when I have published the this site in to specific location, i am facing problem. I am not getting in any ERRORS/warnings while Site crawling & Site publishing. All images paths in the CSS changing including images in the index.htm pages. But problem is images used in css are not appering on pages. other than that css effect like Color/effects are comming on htm pages. Images are also avaible in the published folder.
My question is is there specific way to specify the images paths in the CSS in the oracle site studio designer?
Any help would be much apriciated...
Regards & thanks,
Nirmala Vijaya Sekhar VarreI cant say for sure is there any standard way to avoid this behavior but here are some technique's which can be suitable to solve your problem.
- you can place all your site images into constant relative path to yours CSS. So if your css file is included in page like
<link href="<!--$HttpRelativeWebRoot-->groups/public/documents/web_asset/file.css" type="text/css" rel="stylesheet" />then you can place images into groups/public/documents/web_images/ and refer to them in CSS like that
div {
background:url(../web_images/file.gif);
}- next try you can move all CSS definitions requiring urls into page template leaving main pack in CSS set like that
<link href="<!--$HttpRelativeWebRoot-->groups/public/documents/web_asset/file.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div {
background:url(<!--$HttpRelativeWebRoot-->groups/public/documents/web_images/file.gif);
</style>or make a fragment to hold this dynamic css definition and include it in header in standard way
- next try (for a curvy ones, havent tried myself, but seems working) you can create a idoc script with css commands, but include some commands to make it work like css
i mean this very commands setContentType (page-720), setExpires (page-722), setHttpHeader (page-724) (pages are from idoc reference guide)
i'd recommend using 1st method to avoid complexivity.
Edited by: ivanko on Nov 30, 2009 3:20 PM -
Hi,
I have a Fusion Web Application in Jdeveloper 12C that gets the colors and skinning from a CSS file.
When i add:
af|dvt-hierarchyViewer
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #000000 300%);
background-color: currentColor;
background-attachment: scroll;
to my CSS file and run my application, the Hierarchy opens with a grey colour but then it flashes back to the default light blue gradient of fusionFx-simple-v2.desktop as soon as it tries to fetch data.
But if i change these settings on the Hierarchy itself, the colour changes to the grey and it stays grey.
Any help with this will be appreciated
Stefan du PreezDuplicate Hierarchy Viewer CSS issue
Timo -
Hello,
We haven't seen any big issues either with the Firefox 3 beta's or Firefox 3 but now that FF 3 is out in the wild and no longer beta there are many more people using it. If you see any strange new CSS issue , in the Application Builder , SQL Workshop .. etc. I'd be much obliged if you posted it here.
Here is a good example http://oracleinsights.blogspot.com/2008/06/oracle-apex-builder-css-fix-for.html even though Mark went so far as to figure out the fix , thanks Mark , don't feel the need to do that just a quick post on the page and/or circumstance you saw it would be great.
Thanks in advance,
Carl
blog : http://carlback.blogspot.com/
apex examples : http://apex.oracle.com/pls/otn/f?p=11933:5Hi Carl,
Here's something Firebug showed me:
FirebugContext.browser is undefined
E("ContentArea")apex_ns_3_1.js (line 1)
? in apex_ns_3_1.js@1("ContentArea")apex_ns_3_1.js (line 1)
$x("ContentArea")apex_3_1.js (line 1)
$x_Style(["BB", "ContentArea", "ContentBody"], "display", "")apex_3_1.js (line 1)
$x_Show(["BB", "ContentArea", "ContentBody"])apex_3_1.js (line 1)
filterAttributeRegions(a#ALL.htmldbButtonListCurrent f?p=4000:4...682252#ALL, "#DEFAULTALL")apex_builder.js (line 1)
propTest()apex_builder.js (line 1)
? in apex_3_1.js@1()apex_3_1.js (line 1)
[Break on this error] var NameSpaceOnly=false;var apex={};if(a...aram("x02",C);H.ajax.add(I,B);H._get()};
Regards,
Dimitri
-- http://dgielis.blogspot.com/
-- http://www.apex-evangelists.com/
-- http://www.apexblogs.info/ -
HI,
We have soa suite installed in cloud for the learners and sometimes the Em doesn't load properly..looks like some CSS issue.
How to debug it? what could be the problem?
thanks
SanjeevaSanjeeva,
What do you mean by "Em doesn't load properly"?
Can you post more details? While loading EM look at the log file as well.
Arik -
> This message is in MIME format. Since your mail reader
does not understand
this format, some or all of this message may not be legible.
--B_3300698008_833609
Content-type: text/plain;
charset="ISO-8859-1"
Content-transfer-encoding: 8bit
Hi
I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and
picking it up as I go along. Yep another learner!
It¹s at
http://www.dmcdist.co.uk/CSS_Site/index.html
As I see it the Spry menu I¹ve created is shunted up to
the top over the DMC
logo whereas if I look at in Firefox 3 and the Mac browsers
it¹s absolutely
fine. Has IE 7 got issues with certain CSS inputs because
I¹ve tried
everything to get it to jump down.
Thanks.
--B_3300698008_833609
Content-type: text/html;
charset="ISO-8859-1"
Content-transfer-encoding: quoted-printable
<HTML>
<HEAD>
<TITLE>CSS issue in IE 7</TITLE>
</HEAD>
<BODY>
<FONT FACE=3D"Calibri, Verdana, Helvetica,
Arial"><SPAN STYLE=3D'font-size:11pt=
'>Hi<BR>
I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and pic=
king it up as I go along. Yep another learner!<BR>
It’s at <a href=3D"
/www.dmcdist.co.uk/CSS_Site/index.html</a><BR>
<BR>
As I see it the Spry menu I’ve created is shunted
up to the top over =
the DMC logo whereas if I look at in Firefox 3 and the Mac
browsers it’=
;s absolutely fine. Has IE 7 got issues with certain CSS
inputs because I=
217;ve tried everything to get it to jump down.<BR>
<BR>
Thanks.</SPAN></FONT>
</BODY>
</HTML>
--B_3300698008_833609--> This message is in MIME format. Since your mail reader
does not understand
this format, some or all of this message may not be legible.
--B_3300714750_1854234
Content-type: text/plain;
charset="ISO-8859-1"
Content-transfer-encoding: 8bit
I¹ve got around it by putting line spacing in above the
Spry table but I¹m
sure there must be a better workaround.
On 04/08/2008 5:00 pm, in article
C4BCE642.8A9E%[email protected], "Garry Bradley"
<[email protected]> wrote:
> Can I bump this as I need to try and figure it out.
>
>
> On 04/08/2008 12:33 pm, in article
C4BCA798.8A57%[email protected],
> "Garry Bradley" <[email protected]>
wrote:
>
>> Hi
>> I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and
>> picking it up as I go along. Yep another learner!
>> It¹s at
http://www.dmcdist.co.uk/CSS_Site/index.html
>>
>> As I see it the Spry menu I¹ve created is
shunted up to the top over the DMC
>> logo whereas if I look at in Firefox 3 and the Mac
browsers it¹s absolutely
>> fine. Has IE 7 got issues with certain CSS inputs
because I¹ve tried
>> everything to get it to jump down.
>>
>> Thanks.
>
--B_3300714750_1854234
Content-type: text/html;
charset="ISO-8859-1"
Content-transfer-encoding: quoted-printable
<HTML>
<HEAD>
<TITLE>Re: CSS issue in IE 7</TITLE>
</HEAD>
<BODY>
<FONT FACE=3D"Calibri, Verdana, Helvetica,
Arial"><SPAN STYLE=3D'font-size:11pt=
'>I’ve got around it by putting line spacing in
above the Spry table b=
ut I’m sure there must be a better
workaround.<BR>
<BR>
<BR>
On 04/08/2008 5:00 pm, in article <a
href=3D"C4BCE642.8A9E%garry.bradley@btin=
ternet.com">C4BCE642.8A9E%[email protected]</a>,
"Garry Brad=
ley" <<a
href=3D"[email protected]">garry.bradley@btinterne=
t.com</a>> wrote:<BR>
<BR>
</SPAN></FONT><BLOCKQUOTE><FONT
FACE=3D"Calibri, Verdana, Helvetica, Arial"><=
SPAN STYLE=3D'font-size:11pt'>Can I bump this as I need to
try and figure it o=
ut.<BR>
<BR>
<BR>
On 04/08/2008 12:33 pm, in article <a
href=3D"C4BCA798.8A57%garry.bradley@bti=
nternet.com">C4BCA798.8A57%[email protected]</a>,
"Garry Bra=
dley" <<a
href=3D"[email protected]">garry.bradley@btintern=
et.com</a>> wrote:<BR>
<BR>
</SPAN></FONT><BLOCKQUOTE><FONT
FACE=3D"Calibri, Verdana, Helvetica, Arial"><=
SPAN STYLE=3D'font-size:11pt'>Hi<BR>
I'm currently redoing an HTML website in CSS within
Dreamweaver CS4 and pic=
king it up as I go along. Yep another learner!<BR>
It’s at <a href=3D"
/www.dmcdist.co.uk/CSS_Site/index.html</a><BR>
<BR>
As I see it the Spry menu I’ve created is shunted
up to the top over =
the DMC logo whereas if I look at in Firefox 3 and the Mac
browsers it’=
;s absolutely fine. Has IE 7 got issues with certain CSS
inputs because I=
217;ve tried everything to get it to jump down.<BR>
<BR>
Thanks.<BR>
</SPAN></FONT></BLOCKQUOTE><FONT
FACE=3D"Calibri, Verdana, Helvetica, Arial">=
<SPAN STYLE=3D'font-size:11pt'><BR>
</SPAN></FONT></BLOCKQUOTE>
</BODY>
</HTML>
--B_3300714750_1854234-- -
ADA Fixes for Robohelp: Frames & CSS Issues
Fellow Robohelpers:
I am attempting to resolve a set of major issues within Robohelp 8
a) Frames are not properly named in Robohelp 8. Is anyone aware with which files to change (post generation or pre-generation of outputs) to rename Frames so the visually impaired user is clearly informed which frame they are on
b)When you disable CSS, the navigational elements (frames) become a jumble. They do not function correctly (TOC, Index, Search) since Robohelp is heavily CSS dependent and hides objects (text fields, the various left hand navigational elments) behind CSS.
Any reccomendations how to resolve these, or insights as to how to make Adobe aware of this! I have been reaching out to them about this for quite some time! I am hoping capturing a workaround for at least a) will make the tool one step closer to ADA compliance (screen reader compliance)
Thanks
YaseenHi,
I guess your output is WebHelp. First, try to create 'Section 508 compliant' output or pure HTML output. This may solve quite a bit of your problems.
If you don't want that output, this is what I think:
a) RH nests a lot of frames, but start looking at the launch file, the csh.htm file, whskinfrmset01.htm and whskin_frmset010.htm. Note that if you change the names of frames, this may cause some scripts to stop functioning...
b) As for the CSS issues, the only way to make that work is to manually sort out all problems and amend the javascripts.
If you want to let Adobe know your wish, use the wish form: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&product=38
Greet,
Willam -
Centering with CSS inside a div box
Am subbing on a job, would appreciate help:
I am trying to center the three columns inside the address
box at the bottom
of the page.
http://www.mariagrist.net/dev/motors/bodyshop.htm
It should look just like the box at the bottom of the main
page
http://www.mariagrist.net/dev/motors/default.html
but with content centered.
I copied the divs from the default.htm but am changing them
in order to try
to center the content. So far I have only made it worse
because now the
columns are all on top of each other.
ThanksThanks heaps, that's exactly what I wanted it to do.
Aren't these forums just magnificent.
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Pixel Warrior wrote:
>
>> Am subbing on a job, would appreciate help:
>> I am trying to center the three columns inside the
address box at the
>> bottom of the page.
>>
>>
http://www.mariagrist.net/dev/motors/bodyshop.htm
>>
>> It should look just like the box at the bottom of
the main page
>>
http://www.mariagrist.net/dev/motors/default.html
but with content
>> centered.
>> I copied the divs from the default.htm but am
changing them in order to
>> try to center the content. So far I have only made
it worse because now
>> the columns are all on top of each other.
>> Thanks
> First off you need to change all thress <div
class="address_item_content
> divided"> to <div class="address_item_content">
Just drop the 'divided'
> part.
>
> Next you need to wrap the three newly nmed <divs>
'address_item_content'
> <divs> in another wrapper. See the code below
(scroll down) I've named it
> 'addressHolder'
>
> Find your .address_item_content css and make sure it
looks the same as
> this:
>
> .address_item_content {
> float: left;
> width: 115px;
> padding-left: 30px;
> margin-top: 16px;
> font-size: 11px;
> border-left: 1px solid #000;
> }
>
> add the addressHolder css to your stylesheet.
>
> #addressHolder {
> width: 438px;
> margin: 0 auto;
> }
>
>
>
> Heres the section of code starting and ending with the
> 'address_box_content' <div>
>
> Note to get rid of the 1px solid dividing line on the
left of the first
> 'address_item_content' <div> use some inline css
styling
> 'style="border-left: none;" plus <br style-"clear:
both;"> has been
> inserted after the 'addressHolder'<div> to pull
the 'address_box_content'
> <div> around the three addresses.
>
>
> CODE
>
> <div id="address_box_content">
> <div id="addressHolder">
> <div class="address_item_content" style="border-left:
none;">
> <div id="content_title">DERWENT PARK</div>
> 8c Lampton Ave<br>
> Ph: 03 6211 0660<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">DEVONPORT</div>
> 6-8 Victoria Pde<br>
> Ph: 03 6420 4531<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">BURNIE</div>
> 60-65 Marine Tce<br>
> Ph :03 6430 2440<br>
> </div>
> </div><!-- end addressHolder -->
> <br style="clear: both;">
> </div><!-- end address_box_content -->
> -
Need help centering DIV in CSS
Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.
I did a sketch up of what I want in layout terms.
Any suggestions on how to center a 980px div?
Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
Any help is appreciated.This is a very common question, so an article has been published in the Dreamweaver FAQ
Centering a page:
http://forums.adobe.com/thread/454036
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap -
UL are not showing up in my div correctly? CSS issue
I can not figure out what I am doing wrong here. I had this working fine until I tweaked my site to get rid of the majority of tables on my site and optimize my pages for better peformance. If you take a look at the shopping support and learning center areas towards the bottom of my page at - http://www.thebluedot.net you will see that for whatever reason the DIV is not wrapping properly around the UL?
Any suggestions here?Thanks for the quick reply. I am not sure how I forgot to add the clear float in there. I guess I have been staring at the screen for way too long.
Any other suggestions for optimizing the code layout? I got rid of most of the tables from the previous layout.
Thanks again for your help.
Chris
the BlueDot
www.thebluedot.net -
I was wondering if anyone could help, the attached code
displays fine in IE6 but the left hand column goes haywire in FF.
Any suggestions?
Thanks in advance!
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
background-color: #666666;
background-image: url(Images/background_trim.jpg);
.twoColHybLtHdr #container {
width: 900px; /* this width will create a container that will
fit in an 800px browser window if text is left at browser default
font sizes */
background: #FFFFFF; /* the auto margins (in conjunction with
a width) center the page */
border: 1.4px solid #000000;
text-align: left; /* this overrides the text-align: center on
the body element. */
margin-top: 15px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.twoColHybLtHdr #header {
height: 110px;
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is
used in the #header instead of text, you may want to remove the
padding. */
background-color: #DDDDDD;
background-image: url(Images/Banner.jpg);
.twoColHybLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
background-color: #FFFFFF;
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be
given to every element that will be placed in the side columns */
margin-right: 10px;
.twoColHybLtHdr #mainContent {
width: 40em;
margin-top: 26px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 15em;
padding-right: 15px;
border: 2px solid #F9BDF9;
padding-left: 15px;
#qae {
width: 120px;
float: right;
margin-top: 26px;
margin-right: 20px;
margin-bottom: 7em;
margin-left: 0px;
border: 2px solid #F9BDF9;
padding: 0px;
.twoColHybLtHdr #footer {
padding: 0 10px;
background-color: #DDDDDD;
background-image: url(Images/footer_background.jpg);
.twoColHybLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the
footer will avoid the possibility of margin collapse - a space
between divs */
padding: 10px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right
in your page. The floated element must precede the element it
should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left
in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or
break element and should be the final element before the close of a
container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.style1 {
font-size: 12px
.style2 {
font-size: 16px;
.style6 {
color: #FFFFFF;
.style7 {
color: #E2C8E3;
font-size: 16px;
font-weight: bolder;
#nav ul {
padding: 0px;
list-style-image: none;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
#nav li {
font-size: 85%;
list-style-type: none;
margin-right: 0;
margin-left: 10px;
#nav a {
text-align: center;
display: block;
width: 100%;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
#nav a:link,#nav a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #F9BDF9;
#nav a:hover, #nav a:active {
color: #FFFFFF;
background-color: #E2C8E3;
-->
</style>
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional
comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout
it may need to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a
)&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image;
d.MM_p[j++].src=a
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for
(i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers
.document);
if(!x && d.getElementById) x=d.getElementById(n);
return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new
Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
</head>
<body class="twoColHybLtHdr"
onload="MM_preloadImages('Images/chocorangefireworks2.jpg')">
<div class="style1" id="container">
<div id="header">
<h1 class="twoColHybLtHdr"> </h1>
<!-- end #header --></div>
<div id="sidebar1">
<div id="nav">
<ul>
<li><a href="#" class="style2">Home
</a></li>
<li><a href="#" class="style2">About Us
</a></li>
<li><a href="#" class="style2">Cakes
</a></li>
<li><a href="#" class="style2">Pies </a>
</li>
<li><a href="#"
class="style2">Desserts</a></li>
<li><a href="#" class="style2">Contact
Us</a></li>
</ul>
</div>
<h3> </h3>
<!-- end #sidebar1 --></div>
<div id="qae">
<p align="center">
<!-- This clearing element should immediately follow the
#mainContent div in order to force the #container div to contain
all child floats --><br />
<img src="Images/Quick_Links3.jpg" alt="quicklinks"
width="112" height="26" /><br />
<br />
<a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image4','','Images/chocorangefireworks2.jpg',1)"><br
/>
<img src="Images/chocorangefireworks.jpg" name="Image4"
width="95" height="92" border="0" id="Image4"
/></a></p>
<p align="center" class="link_fonts style1">Chocolate
Orange Biscuits.</p>
<p align="center"><a href="#"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lemon
Meringue','','Images/Lemon Meringue2.jpg',1)"><img
src="Images/Lemon Meringue.jpg" alt="Lemon Meringue Pie"
name="Lemon Meringue" width="100" height="100" border="0" id="Lemon
Meringue" /></a></p>
<p align="center" class="link_fonts style1">Lemon
Meringue Pie</p>
<p> </p>
<p> </p>
</div>
<div id="mainContent">
<p><br />
<span class="style7 style7 style7 style7 style7
style7">Welcome to Bakers Delight! </span></p>
<p>If you love to bake then this is the website for
you. Packed with all sorts of yummy recipes to keep your taste buds
rocking!</p>
Whether you are entertaining, baking a treat for a friend or
just feeling plain peckish then come along and browse through our
recipes.
<p>Feel free to browse around and make sure to come
back soon and check out our newest recipes. </p>
<h1> </h1>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the
#mainContent div in order to force the #container div to contain
all child floats -->
<br class="clearfloat" />
<div id="footer">
<p align="center" class="style6">Home l About Us l
Cakes l Biscuits l Pies l Desserts l Contact Us</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>ok, im quite supprised at that, beacause in my FF and Opera
whats meant to be the left column (pink rollover links) appear
across the whole screen on top, whereas in IE they sit neatly to
the left. -
Stuck on few CSS issues mid-build
Hi all,
Spend the last week making some good progress with a website build, but I’ve hit a few stumbling blocks I hoped the CSS pros out there might be able to help with please!
<div id="body_container">
I’ve tried setting this div’s height to 100% so it expands accordingly (set to 800px right now), but when I do this it ‘disappears’ from view – i.e. the background colour vanishes and all its contents appear on a white background which is applied to the #body_container_fullwidth. Any ideas what I’m doing wrong?
<div id="left_content">
Why isn’t this expanding in height to accommodate the youtube video? It’s height is set to 100%.
<hr class="leftcontent1"></hr>
I’m seeing this in Dreamweaver but not in FF or IE preview. Any ideas?
<img class="rightbutton" src="Images/right_button.png" width="24" height="24" alt="More" />
I’ve put this image in the <div id="right_content_greystrip"> container but it’s appearing below and I can’t work out why?
Sorry it’s quite a few issues all at once – I’ve been over each time and time again but am 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">[email protected]</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 to The Wharf House</h1>
<hr class="leftcontent1"></hr>
<h2>Welcome to the award winning waterside Restaurant and Accommodation, situated in Over on the edge of the historic city of Gloucester.</h2>
<p>Welcome to The Wharf House Waterside Restaurant with Rooms, set in the perfect riverside location. Sample our culipxary delights, which have recently been awarded a highly acclaimed red rosette by the AA or enjoy a stay in our beautiful rooms awarded with 4 stars by the AA.</p>
<p>Each of our 6 bedrooms provide wonderful views of the River Severn, or our newly restored Canal Basin. All rooms are equipped with wide-screen TV’s, walk in WiFi, and private en suite facilities, some with whirl-pool baths.</p>
<p>All rooms include breakfast the following morning. Breakfast is served between 7.30am-9.30am Monday to Friday and 8.30am-9.45am Saturday and Sunday
(earlier if required at a supplement of £5 per room per half hour).</p>
<p>All profits made by The Wharf House are used for the promotion and restoration of the Herefordshire and 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 a look inside The Wharf House restaurant and rooms in Over, near Gloucester, with naration from Natasha Turney at the restaurant.</p>
</div>
</div>
<div id="body_container_right">
<div id="right_content">
<h1 class="rightcontent">Book your stay</h1>
<img class="rightcontent" src="Images/right_content_test.png" width="120" height="90" alt="Test" />
<p>Check availability and book your stay in one 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 the Over Canal Festival on Saturday 1 and Sunday 2 September 2012, featuring Prunella Scales and Timothy West, heritage boat processions, fun on the water, great food and drink, music and 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 is banned for another year at The Wharf House, but instead you’ll find a tempting selection of courses sure to please even the pickiest eater in your party. Plus, a buffet menu is also available this 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"> [email protected]</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 and 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 from The Wharf House will be used for the promotion and restoration of the Hereford and 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;Hi osgood_,
Thanks so much for your generous help - this was hugely useful and much appreciated. I also managed to fix my top query via your overflow: hidden; suggestion too.
Everything's looking great with the exception of my little ../Images/right_button.png image which isn't showing up for some reason - I ideally want it to be flush over on the right of that greystrip - any ideas?
Thanks again
<div id="body_container_right">
<div id="right_content">
<h1 class="rightcontent">Book your stay</h1>
<img class="rightcontent" src="../Images/right_content_test.png" width="120" height="90" alt="Test" />
<p>Check availability and book your stay in one of our luxurous individual rooms.</p>
<div id="right_content_greystrip">
<p class="right_content_greystrip"><a href="../Images/right_button.png"><span>Check room availability</span><img src="Images/right_button.png" width="24" height="24" alt="More" /></a></p>
</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 the Over Canal Festival on Saturday 1 and Sunday 2 September 2012, featuring Prunella Scales and Timothy West, heritage boat processions, fun on the water, great food and drink, music and 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 is banned for another year at The Wharf House, but instead you’ll find a tempting selection of courses sure to please even the pickiest eater in your party. Plus, a buffet menu is also available this festive season.</p>
</div>
</div>
@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: solid 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;
overflow: hidden;
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;
overflow: hidden;
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;
background-color:#DFDFDF;
float: left;
#right_content_greystrip span {
float: left;
width: 230px;
display: block;
padding: 3px 0 0 0;
#right_content_greystrip img {
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;
Maybe you are looking for
-
After iTunes update it won't import a whole CD, only one song at a time.
I just updated iTunes on a Win 7 64 bit system and now can't import an entire CD. Import stops after 1 or 2 songs, and I get error message "Error occurred while converting the file "(song name)". The disk is not available". I can import the entire CD
-
How to install and run a JAXB example
I have given a work to install and run an example of JAXB. I didn't have any idea about it. What is the procedure and the necessary fiels are needed to download, so that JAXB program can run..... Please some one help me out. Thanks
-
My books are not downloading from the app to my device
I have a app called fiction and when I buy the books they dont download.
-
Use "ListContains' in a WHERE clause
I believe I have a syntax problem and could you some help. First, I have a field in an Access DB called 'degree" that conatins a list of numbers. This list can be any combination of the numbers 4 through 32. On my search page I have a selection box i
-
We will soon migrate from IE 5.5 to IE 6.0 which will be installed with a minimum of features. If the Enterprise Portal 6.0 SP2 application should run in IE 6.0, we will off course need Cookies, JavaScript etc. But - where can I find a detailed list