Help with CSS Positioning
Hello. I've been struggling with how to position my footer so that it moves relative to the content that is added to the div tags before it in the template I'm working on. Here's what my code looks like:
<!DOCTYPE html>
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>NEW TEMPLATE</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
.wrapper {
background-color: #fffee8;
margin: auto;
padding: 5px;
height: auto;
width: 980px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
text-align: left;
color: #FFF;
position: relative;
overflow: visible;
.header {
margin: 0px;
padding: 0px;
height: auto;
width: 980px;
background-color: #424edd;
border: 0px solid #09C;
.logoarea {
background-color: #fffee8;
margin: 0px;
padding: 0px;
height: 160px;
width: 980px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
.navbar {
background-color: #fffee8;
height: 30px;
width: 980px;
margin: 1px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
.subnavmenu {
background-color: #CCC;
height: 25px;
width: 980px;
border: thin solid #333;
font-family: "Felix Titling", "Engravers MT";
font-size: 10px;
font-style: normal;
line-height: normal;
color: #333;
text-decoration: blink;
.leftcontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FFF;
background-color: #55065F;
padding: 0px;
height: auto;
width: 500px;
margin-right: 0px;
margin-left: 0px;
border: medium outset #CCC;
.rightcontent {
background-color: #333;
padding: 0px;
height: auto;
width: 450px;
margin-right: 0px;
margin-left: 0px;
border: medium inset #fffee8;
float: right;
font-family: Arial, Helvetica, sans-serif;
color: #FFFee8;
font-size: 12px;
position: static;
.footer {
background-image: url(/Graphics/MORGAN%27S%20PIC.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
height: 165px;
width: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
text-align: center;
color: #666;
position: relative;
left: 0px;
bottom: 0px;
#logo {
position:static;
left:-50px;
top:-200px;
width:272px;
height:176px;
z-index:1;
#apDiv4 {
position:absolute;
left:656px;
top:30px;
width:544px;
height:53px;
z-index:1;
background-color: #fffee8;
float: right;
-->
</style>
<script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
left:857px;
top:123px;
width:49px;
height:50px;
z-index:1021;
#apDiv3 {
position:absolute;
left:956px;
top:122px;
width:150px;
height:50px;
z-index:1022;
#apDiv5 {
position:absolute;
left:649px;
top:227px;
width:192px;
height:81px;
z-index:1021;
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body class="body" id="body" background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png">
<div id="apDiv4" >
<script>
(function() {
var cx = '004600001770955757780:ub1su5xae54';
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
</script>
<gcse:search></gcse:search></div>
<div id="apDiv5"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMif flin-Juniata-Special-Needs-Center-Inc%2F129756770511336&send=false&layout=standard &width=450&show_faces=true&font&colorscheme=light&action=like&heig ht=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></div>
<div class="wrapper" id="wrapper"><div id="apDiv1" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogan.jpg" width="296" height="169" alt="Accept Support Empower Whatever It Takes"></div>
<div class="header" id="header">
<div class="logoarea" id="logoarea">
<div id="logo" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogo Transparent BG.png" width="273" height="173" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
</div>
<div class="navbar" id="navbar">
<img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="59,4,149,24" href="/NAV BAR OPTIONS/ABOUT US/AboutUs.html" target="_blank" alt="About Us">
<area shape="rect" coords="157,3,255,23" href="/NAV BAR OPTIONS/CONTACT US/ContactUs.html" target="_blank">
<area shape="rect" coords="263,4,423,22" href="/NAV BAR OPTIONS/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_blank">
<area shape="rect" coords="429,3,578,22" href="/NAV BAR OPTIONS/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
<area shape="rect" coords="586,3,698,23" href="/NAV BAR OPTIONS/GET INVOLVED/GetInvolved.html" target="_blank">
<area shape="rect" coords="704,5,815,24" href="/NAV BAR OPTIONS/DONATE NOW/DonateNow.html" target="_blank">
<area shape="rect" coords="826,4,924,23" href="/NAV BAR OPTIONS/AFFILIATES/Affiliates.html" target="_blank">
</map>
</div>
<div class="subnavmenu" id="subnavmenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
<ul>
<li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
<li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
<li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
<li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
<li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
</ul>
</li>
<li><a href="#">YOUTH</a></li>
<UL>
<li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
<li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
<li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</a></li>
<li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">EARLY INTERVENTION</a></li>
<li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
<li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-BALL</a></li>
<li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">TEEN CLUB</a></li>
<li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">TRAINING & TRANSITION</a></li>
</UL>
<li><a class="MenuBarItemSubmenu" href="#">EVENTS</a>
<ul>
<li><a href="/SUBNAVMENU/EVENTS/LipSync.html">LIP SYNC</a></li>
<li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">TOURING FRIENDS</a></li>
<li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
<ul>
<li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & THERAPY</a></li>
<li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">EQUIPMENT LOAN</a></li>
</ul>
</li>
<li><a href="#">EMPLOYEES</a></li>
<UL>
<li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
<LI><A href="/NAVBAR/ABOUT US/AboutUs.html">MEET OUR STAFF</A></LI>
<LI><A href="/SUBNAVMENU/EMPLOYEE ACCESS/EmployeeAccess.html">EMPLOYEE ACCESS</A></LI>
</ul>
</ul>
</div>
</div>
<div class="rightcontent" id="rightcontent"><!-- TemplateBeginEditable name="editrightcontent" -->
<p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. </p>
<!-- TemplateEndEditable --></div>
<div class="leftcontent" id="leftcontent"><!-- TemplateBeginEditable name="editleftcontent" -->
<p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. </p>
<!-- TemplateEndEditable --></div>
<div class="footer" id="footer">Contact Us | About Us | Disclaimer</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/Web Site Root Folder/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/Web Site Root Folder/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
<header>logo and menu goes here </header>
<section>
<aside>left column content</aside>
<aside>right column content<aside>
</section>
<footer>footer goes here </footer>
</body>
Nancy O.
Similar Messages
-
Help with CSS positioning of menu
Hello.
Am slowly making some progress following recent difficulties
with CSS.
At the moment things are finally looking the same on
different browsers EXCEPT the menu bar to the right of the movie:
http://www.notjustthenews.co.uk/page2_movies.html
Basically in Internet Explorer it's where I want it to be,
level with the top of the movie, but in Safari it drops down much
lower.
Is there anything I can do to stop this happening?
This is the CSS I'm using for the menu:
width: 300px;
height: 160px;
float: left;
margin-top: 40px;
margin-bottom: 0px;
margin-left: 85px;
display: block;
clear: none;There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
<header>logo and menu goes here </header>
<section>
<aside>left column content</aside>
<aside>right column content<aside>
</section>
<footer>footer goes here </footer>
</body>
Nancy O. -
Need some help with region position
Hi,
I need som help with regions position....
Background:
I have 2 regions, I will call them reg1, reg2 and reg3.
reg1 = Page Template Body (2. items below region content), column 1, search region.
reg2 = Page Template Body (2. items below region content), column 2, import file region.
reg3 = Page Template Body (3. items above region content), column 1, search result, grid region, very wide.
Issue with the position, the setup explained makes my layout like this
reg1--------------------------------reg2
------------------reg3--------------------
What I want:
reg1-reg2
------------------reg3--------------------
What am I doing wrong?
Regards DanielDaniel,
this will also work:
Region1 HTML table cell attributes
width="10%"
Region2 HTML table cell attributes
align="left"
without touching the page template.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://htmldb.oracle.com/pls/otn/f?p=31517:1
------------------------------------------------------------------- -
Help with Layer Positioning and TimeLine
Hello all, here is my situation:
I am trying to do a simple Layer animation for my home
page... 4 Layers startoff at the right of my webpage(table) and end
up at the left handside, as an example.
My problem is I have a main 1x1 table that is centered, and
that works fine to center all the text and images that are within
it, but the layers that I tried placing within it stay absolute to
the screen and not relative to the table.... and if I try to
specify relative position in the first place for any of the layers
that Layer disapears from my Layer panel and I cannot timeline with
it???!!!
This Started out as a lame trial to avoid making a flash
movie for this animation.. but right now I am more interested in
knowing the possibilities and limitations of using Layers and
Timelines in Dreamweaver.... Any help or comments are most welcome.
LaythI have requested that the thread be removed, Andrew. That's
the best we can
do, I'm afraid. Thing is, it can only be removed from the
webforums, and
not from the local computers of those who have already
downloaded the
message. Also, if Google Groups synched already, then it's
like being
carved in stone....
You can see if that's the case by searching here -
http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamweaver
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> If you go here -
http://www.great-web-sights.com/g_layerlaws.asp,
and read
> through the layer laws, you'll see that you have broken
at least one by
> putting your layers into a table. Being absolutely
positioned, the layers
> do not rely on the table for their location on the
screen. There are ways
> to do this (easily) if you understand the whole concept
of CSS
> positioning. You can try the following things -
>
> * After setting your timeline the way you want it,
MANUALLY change the
> position attribute of each layer from "absolute" to
"relative". The
> timeline will still work, but you have changed the
entire paradigm for
> positioning on the <div> tags by making that
change. Having relatively
> positioned elements withing a table seems to work pretty
well.
>
> or
>
> * After setting your timeline the way you want it,
MANUALLY move the code
> for the layers OUT OF THE TABLE, and place it back on
the page,
> immediately above the </body> tag. Then follow
these directions -
>
> Change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> <!--
> body { text-align:center; color:#CCC; }
> #wrapper { text-align:left; width:720px; margin:0
> auto;position:relative; }
> -->
> </style>
> </head>
>
> change this -
>
> <body ...>
>
> to this -
>
> <body ...>
> <div id="wrapper">
>
> and this -
>
> </body>
>
> to this -
>
> </div><!-- /wrapper -->
> </body>
>
> and see if that helps.
>
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "laythss" <[email protected]> wrote in
message
> news:[email protected]...
>> Hello all, here is my situation:
>> I am trying to do a simple Layer animation for my
home page... 4 Layers
>> startoff at the right of my webpage(table) and end
up at the left
>> handside, as
>> an example.
>> My problem is I have a main 1x1 table that is
centered, and that works
>> fine to
>> center all the text and images that are within it,
but the layers that I
>> tried
>> placing within it stay absolute to the screen and
not relative to the
>> table....
>> and if I try to specify relative position in the
first place for any of
>> the
>> layers that Layer disapears from my Layer panel and
I cannot timeline
>> with
>> it???!!!
>> This Started out as a lame trial to avoid making a
flash movie for this
>> animation.. but right now I am more interested in
knowing the
>> possibilities and
>> limitations of using Layers and Timelines in
Dreamweaver.... Any help or
>> comments are most welcome.
>>
>> Layth
>>
>
> -
I guess I am "old school" in that I have always used tables
to lay out my web pages. I decided I must learn to do it with CSS,
but I'm having a terrible time (and it shouldn't be so hard!). I
understand how to define the styles, add divs, etc. Here's what I'm
having trouble with:
How do I specify the normal page width to be 800 pixels,
however I want it to be relative to the browser (i.e., 100% of 800
pixels).
I understand the "float" tag, but if I have a right-hand
sidebar, I can't seem to get the text to the left (in a div called
"maincontent") to stop at the sidebar and wrap to the next line. I
tried specifying "Hidden" as my textbook suggests, but that has no
effect.
I can easily do all of this with tables, so do I really need
to abandon them?
Thanks!Hi Jane,
I'll try to answer all your questions, then a tip or two to
stop the main
content from dropping when the browser window size is
reduced.
- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;
That's right.
margin: 0px auto; is actaully saying make the top margin 0,
the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;
You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left
is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it
the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px,
it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are
missing, then it
will use the top value for the bottom, and the right value
for the left.
What auto right and left is doing is subtracting your content
width (the
container width) from the browser window width, and then
dividing the
remainder in 2 and applying each value to each side of the
container.
-"I found that they all took on the font of the maincontent
and I had to fix
them
individually. "
The only text that should be Time is the text in your main
content, where
you have that font defined. Everything else should be Arial
if you define
the body as such. I'll post a link at the end of this.
- "I put my bold sentence (Friendship, Fun, etc.) in h1, but
I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just
style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like,
and you can
style these just like the h1 style above.
- "I don't quite understand the .rightsidebar p { and
container p{
I am assigning the spacing to the <p> tag? What exactly
is that doing?"
That is saying, give all the <p> tags inside the
rightsidebar container the
follwing style.
So, in this example:
.rightsidebar p {
font-size: 18px;
margin: 2px 10px;
it's saying give all the <p> tags in this container a
size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag
- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div
class="footer">"
You could, if the footer was in the container. It just needs
to be the final
element before the close of a container that contains the
float(s).
-Do you use the <div class="container"> technique all
the time?
Yes, most of the time. I usually put everything in it, and
use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different
elements to align
with the right and left sides by applying values to all of
them, which can
get tricky quickly.
-"If you'll indulge me one more question, I wonder if it's
possible to put a
graphic (say, of a putting green) underneath my
rightsidebar? I would want
the sidebar to lay on top of the putting green for an
interesting artistic
touch.
Yes, you can give that div a background image. You just need
to make the div
the same size as the image so you see it all (or vice-versa).
Now, to make that maincontent not drop like it does you can
remove the width
in the CSS. Now it will expand over to the left edge of the
rightsidebar.
You can control how close it gets by giving the right sidebar
a bigger left
margin. The point is, with no width assigned, the maincontent
will shrink
down to the longest word in it before it drops.
Here's what it looks like:
http://tnsgraphics.com/test2.htm
Let me know if you have any questions.
Take care,
Tim
"janeinpa" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Tim...
>
> You have been very kind to help me learn CSS! I very
much appreciate it
> and
> am really delighted to have gained a better
understanding of this. I
> studied
> all your suggestions and started the page from scratch.
Take a look here:
>
http://www.allisonwebcreations.com/ewga_site/good_page/indexgood.htm
I'm
> very
> pleased with it. I discovered a couple of things:
>
> I didn't realize that
> margin-top: 0px;
> margin-right: auto;
>
> is not the same as margin: 0px auto;
>
> are they two different codes? Anyway, it didn't center
until I fixed
> that.
>
> I understand what you're saying about the font codes
being redundant,
> however
> I found that they all took on the font of the
maincontent and I had to fix
> them
> individually. This must be an error in how I'm coding
it. Is the order
> in
> which I did them to blame? I put it in the order that
I'm reading it, but
> perhaps I should do it differently.
>
> I also couldn't get the footer to move left to the
margin. I'm not sure
> why,
> since I think I followed all your suggestions.
>
> I put my bold sentence (Friendship, Fun, etc.) in h1,
but I had to change
> the
> color & size, so that added another style element.
I'm afraid that
> probably
> isn't correct. I also couldn't have my normal content
text follow
> immediately
> on the same line. Maybe that isn't possible.
>
> I don't quite understand the .rightsidebar p { and
container p{
> I am assigning the spacing to the <p> tag? What
exactly is that doing?
>
> I also don't quite understand the .clear {
> Why not just choose clear:both on the next section
<div class="footer"> ?
>
> Do you use the <div class="container"> technique
all the time? How do you
> decide what goes in it -- just floating items or can I
think of it as a
> table
> that holds all my main blocks of info? Why not include
the footer in it?
>
> If you'll indulge me one more question, I wonder if it's
possible to put a
> graphic (say, of a putting green) underneath my
rightsidebar? I would
> want the
> sidebar to lay on top of the putting green for an
interesting artistic
> touch.
>
> Thank you, thank you, thank you again. Here are my css
codes (which I
> have in
> an external file. Is it better to import or link to the
file?)
>
> Have a wonderful New Year.
>
>
>
>
>
>
> .body {
> padding: 0px;
> margin-top: 0px;
> font-family: Arial, Helvetica, sans-serif;
> }
> .masthead {
> width: 780px;
> margin: 0px auto;
> padding-top: 10px;
> padding-right: 0px;
> }
> .maincontent {
> background-color: #FFFFFF;
> text-align: left;
> width: 60%;
> margin-top: 0px;
> padding-top: 10px;
> padding-right: 0px;
> font-family: "Times New Roman", Times, serif;
> font-size: medium;
> color: #000000;
> }
> .maincontent p{
> margin-top: 2px;
> margin-right: 10px;
>
> }
> .rightsidebar {
> font-size: small;
> background-color: #DEEBE4;
> text-align: center;
> float: right;
> width: 250px;
> margin-top: 10px;
> margin-left: 20px;
> border: thick solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
>
> }
> .leftbox {
> font-size: small;
> font-style: italic;
> color: #336600;
> background-color: #DEEBE4;
> text-align: center;
> clear: both;
> width: 300px;
> margin-top: 50px;
> border: thin solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
> }
> .footer {
> font-size: small;
> margin: 100px;
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-style: normal;
> }
> .container {
> width: 90%;
> margin: 0px auto;
> }
> .clear {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
> .event {
> font-size: 24px;
> font-weight: bold;
> color: #00493E;
> }
> .upcomingdate {
> font-size: 20px;
> color: #990134;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .eventitem {
> font-size: 18px;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> }
> .eventlink {
> font-size: 14px;
> font-style: italic;
> margin: 0px;
> }
> .smallboxhead {
> font-size: large;
> color: #00493E;
> font-style: normal;
> font-weight: bold;
> }
> .companyname {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: small;
> font-style: italic;
> color: 990134;
> }
> -
Help with CSS modifications...
Hi!
Finally got this up online for temporary testing. Here are
the items I'd like to modify...not sure how to tweak the code/css.
1) for starters, the links on the left hand continously move
down when I hit return in order to add more content on the page.
I'd like for everything in the left hand panel to be completely
static, and so the links fit into that transparency block within
the background image. (they are in a table now, before I had them
outside of a table, but I had a difficulty controlling them) When
we correct these to move up, the contact phone #, etc, will move up
where they should be positioned as well.
2) if you click on one of the links, the remainder of the
links all receive the 'visited' state visual; it's reading as one
cohesive element. That should not be, as they are independent.
3) I'm trying to control the "join our mailing list" to move
up into the sign up box, and in turn, this will bring up my main
paragraph closer to the top of this cell.
As you will see, I'm attempting to control this with CSS as
much as I can.
Thank you for your help; I really appreciate it!
www.fasttag.com/prestige-lane-testing-phase> 1) for starters, the links on the left hand continously
move down when I
> hit
> return in order to add more content on the page. I'd
like for everything
> in the
> left hand panel to be completely static, and so the
links fit into that
> transparency block within the background image. (they
are in a table now,
> before I had them outside of a table, but I had a
difficulty controlling
> them)
> When we correct these to move up, the contact phone #,
etc, will move up
> where
> they should be positioned as well.
They are moving because a) they are in a table that is nested
in a table
cell, b) the table cell in which that table is nested has no
vertical
alignment specified, c) with no vertical alignment specified,
you get the
default, which is MIDDLE, and d) as the outer table grows in
height, the
middle point of the cell in which the navigation table is
nested also
migrates lower.
The solution is to assign the CSS style vertical-align:top to
td.navlinks.
> 2) if you click on one of the links, the remainder of
the links all
> receive
> the 'visited' state visual; it's reading as one cohesive
element. That
> should
> not be, as they are independent.
This is because they are all linking to the same target.
Visit one, and all
become visited.
<tr>
<td><a href="
http://www.fasttag.com">FastTag</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Greenlight
Keycard</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Pocket
Concierge</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Other
Hotel Products</a></td>
> 3) I'm trying to control the "join our mailing list" to
move up into the
> sign
> up box, and in turn, this will bring up my main
paragraph closer to the
> top of
> this cell.
The " " is not a layout tool. Don't use it as if it
were -
<h1
class="signup"> SIGN
UP!</h1>
If you want that content spaced over from the left, use a
padding-left style
on the .signup class.
Do not use background-attachment on that <h1> -
.signup {
height: 50px;
width: 99px;
border: 1px solid #C5C19D;
margin-top: 20px;
margin-left: 420px;
margin-right: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #591F00;
font-size: 13px;
background-image: url(images/signup-gradient.jpg);
background-repeat: repeat-y;
background-position: 10px;
background-attachment: fixed;
Replace your markup for that <h1> and <td> with
this -
<td width="546" height="261" valign="top"><h1
class="signup"
style="padding-left:10px;width:89px;">SIGN UP!<br>
<span class="joinmailinglist"
style="margin-left:0;">Join our
<br>mailing list</span></h1>
Finally, validate your page, and fix the errors. You have
table heights,
for example....
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
==================
"r_tist" <[email protected]> wrote in
message
news:[email protected]...
> Hi!
>
> Finally got this up online for temporary testing. Here
are the items I'd
> like
> to modify...not sure how to tweak the code/css.
>
> 1) for starters, the links on the left hand continously
move down when I
> hit
> return in order to add more content on the page. I'd
like for everything
> in the
> left hand panel to be completely static, and so the
links fit into that
> transparency block within the background image. (they
are in a table now,
> before I had them outside of a table, but I had a
difficulty controlling
> them)
> When we correct these to move up, the contact phone #,
etc, will move up
> where
> they should be positioned as well.
>
> 2) if you click on one of the links, the remainder of
the links all
> receive
> the 'visited' state visual; it's reading as one cohesive
element. That
> should
> not be, as they are independent.
>
> 3) I'm trying to control the "join our mailing list" to
move up into the
> sign
> up box, and in turn, this will bring up my main
paragraph closer to the
> top of
> this cell.
>
> As you will see, I'm attempting to control this with CSS
as much as I can.
>
> Thank you for your help; I really appreciate it!
> www.fasttag.com/prestige-lane-testing-phase
>
>
> -
Could anyone help with the query below. I posted this last
friday but never
got a reply. The original message that i posted is also
below. It might be
easier to read from the bottom up.
Thanks
James
----------------------------------->
Thanks for your reply.
I've changed my code as you suggested & now the content
div is coming about
half way down the page- so were getting somewhere. There are
floated
elements so I have added the 'clearthefloats' div. There are
no absolutely
positioned elements, but I tried making the content div
position:relative
anyway but it had no effect.
I also added some text into the 'clearthefloats' div so i
could see where it
was on the page & it is halfway down the page itself,
even though it is
below the other elements in the page.
Thanks,
James
"typist" <[email protected]> wrote in
message
news:[email protected]...
> How are you positioning what is inside your contentdiv?
Are the elements
> floated?
> IE will surround your floated elements, Firefox will not
unless you put a
> non-floated element after the floated ones, and clear
it.
>
> <div class="clearthefloats"> <!--
--></div> (I just put a comment in to
> hold
> the div)
>
> div.clearthefloats {clear:both:} (look up "Stylin' with
CSS" by Charles
> Wyke-Smith for more)
>
> But if you are putting absolutely positioned elements
into your div, then
> you
> need to make your content div position:relative. This
will make the
> elements
> position in the context of the content div instead of
the body.
>
ORIGINAL MESSAGE:
>>Hi,
>>I've got a page with css controlled div's. One of
them ('content') not
>>very
>>surprisingly contains all the page elements. For some
reason though, when
>>viewed in firefox the content div does not wrap round
it's contents (the
>>bg
>>of the page has a light purple color and the content
div is white). There
>>is
>>just a thin strip of white at the top where it
begins. It looks fine in
>>ie.
>>Here's the code for the content div:
>>#content {width:760px;
>> margin:0px auto;
>> background-image:url(images/logostrip.jpg);
>> background-position:top;
>> background-repeat:no-repeat;
>> background-color:#FFFFFF;
>> padding-bottom:10px }
>>I have tried defining the height, which works in
firefox, but then in ie
>>there is about 100px space at the bottom of the
content div. For some
>>reason
>>1000px in firefox is shorter than 1000px in ie???
>>Is there anything i am missing?
>>Thanks,
>>JamesYes I have tried setting the height. It should wrap round the
whole page
content not just the graphic. I tried setting the height till
it looked
right in firefox but then in ie there was about 150px extra
at the bottom.
(this was on another page which is a lot longer). Plus if i
set the height
to be right on the homepage, the other pages will be wrong. I
would have to
use seperate style sheets, or give the div's different id's.
Surely there is a way to get the div that all the contents
are in, to simply
wrap round them.
Thanks
"Nadia : **AdobeCommunityExpert**"
<[email protected]> wrote
in message news:[email protected]...
> Setting a height of 306px on that container, revealed
the whole graphic as
> per the visual in IE.
> I did this using the FFox edit CSS tool - but it should
work.
>
> --
> Nadia
> Adobe� Community Expert : Dreamweaver
> --------------------------------------------
>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
> --------------------------------------------
>
http://www.perrelink.com.au
- Web Dev
>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>
http://www.adobe.com/devnet/dreamweaver/css.html
> -------------------------------------------------
> "Nadia : **AdobeCommunityExpert**"
<[email protected]>
> wrote in message
news:[email protected]...
>> Is that the graphics in the #container?
>> Have you tried setting a height on that container to
the height of your
>> header image?
>>
>> --
>> Nadia
>> Adobe� Community Expert : Dreamweaver
>> --------------------------------------------
>>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
>> --------------------------------------------
>>
http://www.perrelink.com.au
- Web Dev
>>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>>
http://www.adobe.com/devnet/dreamweaver/css.html
>> -------------------------------------------------
>> "James D" <[email protected]> wrote
in message
>> news:[email protected]...
>>> Ok,
>>>
>>> please visit
http://www.beta-design.co.uk/ivesys_home_white/home.html
to
>>> see
>>> the page.
>>>
>>> If you view it in Firefox you will see a thin
white strip at the top.
>>> This
>>> should wrap round the page contents. It works in
IE. If you cannot
>>> access
>>> the css which is in an external file then please
repost and i will paste
>>> it
>>> all into a reply.
>>>
>>> Thanks
>>>
>>>
>>>
>>>
>>>
>>> "Osgood" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>> James D wrote:
>>>>
>>>>> Could anyone help with the query below.
I posted this last friday but
>>>>> never
>>>>> got a reply. The original message that i
posted is also below. It
>>>>> might be
>>>>> easier to read from the bottom up.
>>>>
>>>> Its better to link to the complete page
rather than just supplying half
>>>> the story. If you do that its going to be
easier to identify the issue.
>>>> With the little information you have
supplied its not going to be
>>>> possible.
>>>>
>>>
>>>
>>
>>
>
> -
Help with css 3 column layout with background
So I'm really not much of a web designer and usually deal in
print but a friend wanted help with her site so I'm taking a crash
course in css. so I was wondering if anyone a little more web savvy
than I can spot why my sites background Is sliding around.
this is the site as it
stands
this is the
main css i found a site to generate the codes to get around browser
specific glitches
what
I see in Safari
what
i see in firefox
what
background should look like
any help would be greatly appreciated thanksPeter Llamas posted in macromedia.dreamweaver:
> So I'm really not much of a web designer and usually
deal in print
> but a friend wanted help with her site so I'm taking a
crash
> course in css. so I was wondering if anyone a little
more web
> savvy than I can spot why my sites background Is sliding
around.
>
http://whiskeylemonade.x10hosting.com
I have no idea what you mean by "sliding around", but could
it have
something to do with your missing old_break.css file?
http://whiskeylemonade.x10hosting.com/css/old_break.css
HTTP/1.x 404 Not Found
Mark A. Boyd
Keep-On-Learnin' :) -
Help with some positioning problems...
Hello again, was hoping for some assistance on the following pages...
I created 3 coloumns, 2 for text and one for an image but they dont seem to be working when i preview them. Heres the link...
http://www.rayoga.co.uk/about/
Also is the positioning ok on this page? does the text flow ok or should i reconsider a different layout?
http://www.rayoga.co.uk/why%20yoga/index.html
Am i able to add padding to the left of the contact form? Ive tried a few things but cant get it to work...
http://www.rayoga.co.uk/contact/
thanks in advance!
BennThe tables are messing you up. You don't really need tables for forms.
Below is a basic HTML form styled with CSS. Copy & Paste this code into a new, blank HTML document.
<!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=iso-8859-1" />
<title>Sample HTML Form</title>
<style type="text/css">
/**BEGIN FORM STYLES**/
#form1 {
font-size: 14px;
width: 500px;
margin: 0 45px; /**adjust margins as needed**/
background: #FFF;
border: 2px groove green;
padding: 7px 14px 7px 14px;}
fieldset {
margin-bottom:5px;
border-right:none;
border-bottom:none;
border-left:none;
legend {
padding: 8px;
border: 1px solid silver;
background: #009900;
font-weight: bold;
color: #FFF;
line-height: 1.5;
margin-left: -45px;
/**for IE6 only**/
*margin-left:0;
/**wrap form lables and fields inside ordered lists for better web accessibility**/
#form1 ol {
list-style:none;
margin:0;
padding:0}
#form1 li {
padding:5px;
margin: 0;
clear: left;
label {
display:inline-block;
float:left;
line-height: 23px; /**lines up labels with fields**/
width:167px;
font-size: 12px;
color: #666;
text-align:right;
margin-right: 10px; /*space between labels, fields*/
input[type=text],
textarea {
width: 190px; /**same width on all text fields**/
padding: 5px;
color: #666;
border: 1px dotted #009900;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
/**field background on focus**/
input:focus,
input:active,
textarea:focus,
textarea:active
{background-color: #EBECDE; border: 1px solid;}
#submit {
margin-left: 45px;
background: #009900;
font-size: 18px;
color:#FFF;
font-weight: bold;
border: 2px outset #FFF}
#submit:hover,
#submit:focus,
#submit:active {
background: #006600;
color: yellow;
border: 2px inset #FFF}
/**END FORM STYLES**/
</style>
</head>
<body>
<!--BEGIN HTML FORM, action="path to form-processing script on your server" -->
<form name="form1" id="form1" action="form-email-script.php" method="post" enctype="multipart/form-data">
<h3>HTML Contact Form</h3>
<fieldset>
<legend>Required Fields:</legend>
<!--for trapping spam bots -->
<input name="config" type="hidden" value="0" />
<input name="nospam" id="nospam" type="text" style="display:none" />
<ol>
<li>
<label for="first_name">First Name:</label>
<input name="first_name" id="first_name" type="text" />
</li>
<li>
<label for="last_name">Last Name:</label>
<input name="last_name" id="last_name" type="text" />
</li>
<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Optional Fields:</legend>
<ol>
<li>
<label for="phone">Phone number:</label>
<input name="phone" id="phone" type="text" />
</li>
<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" />
</li>
<li>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
</li>
<li>
<label for="submit"> </label>
<input type="submit" name="submit" id="submit" value="Submit" />
</li>
</ol>
</fieldset>
</form>
<!--END OF FORM -->
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I have a layout that I need help with please. The bright green panel is going to have a Flash file inserted but I need it to sit inside the detailsWrapper div, which needs to stretch to allow this to happen. The content is being generated through php modules and the details will vary in length, so I'm having difficulty styling this. I'm sure it's something obvious but I need help please!
Here's the link: http://www.designermagic.co.uk/hobarts/reapitDetails.php?clearcache=true&pagevars=1-bedroo m-property-for-sale-in-London-N22-hobrps-ALE090002Your CSS code could use some tidying up. It's kind of a mess. See details below.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. designermagic.co.uk%2Fhobarts%2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedro om-property-for-sale-in-London-N22-hobrps-ALE090002
These statements are redundant.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
margin: 0;
padding: 0;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
Try changing the above code to just this. * = the universal selector.
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
outline-style:none; /**outline is not on by default so unsure why you need this**/
More on CSS Shorthand
http://www.dustindiaz.com/css-shorthand/
And you have HTML code errors but the symbols in your document are blocking the validator from giving results.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designermagic.co.uk%2Fhobarts %2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedroom-property-for-sale-in-Londo n-N22-hobrps-ALE090002
After you fix the code errors, post back with a URL to the new page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Help with CSS rule cross platform browser compatibility
I am an advanced beginner website designer.
The website I need help with is www.sprungtheatre.com
I designed this site on a PC machine. Each page has a
different CSS Background Image rule. The only rule I have set is
image and the "non-repeat." I have not set rules for its placement.
Each of these images had a feather effect applied to it in
Illustrator so the image would fade into the black background. This
works fine on Windows machines in IE and Firefox.
However, on Macs, the left-hand side of the image is chopped
off. Which is to say, it appears if the feathered edge has been cut
off and the image ends abruptly.
Is there any way to fix this problem?
My only guess is that the following my be happening:
The CSS Background Image rule is applied to a nested table
that is editable in a template. I'm thinking that the Mac browswers
are moving the image to the upper left of the overall, "poppa"
table in which the editable region is nested, cutting off that part
of the image that appears in the non-editable region of the "poppa"
table and showing that part of it that appears in the nested,
editable table. I hope that makes sense. Would applying the
placement rules help this? If not, what might?
Many thanks,
JonDon't use a fixed background image.
Sorry to break the news but the code is hidous for an
advanced beginner.
Youre sure to run into much trouble unless you are preapred
to take
some time out and learn this stuff correctly.
Using layout mode and spliting and merging tables into all
sorts of
shapes is a seriously bad method and one you should quickly
move away
from for the sake of your own sanity.
zaphron wrote:
> I am an advanced beginner website designer.
>
> The website I need help with is www.sprungtheatre.com
>
> I designed this site on a PC machine. Each page has a
different CSS Background
> Image rule. The only rule I have set is image and the
"non-repeat." I have not
> set rules for its placement.
>
> Each of these images had a feather effect applied to it
in Illustrator so the
> image would fade into the black background. This works
fine on Windows machines
> in IE and Firefox.
>
> However, on Macs, the left-hand side of the image is
chopped off. Which is to
> say, it appears if the feathered edge has been cut off
and the image ends
> abruptly.
>
> Is there any way to fix this problem?
>
> My only guess is that the following my be happening:
>
> The CSS Background Image rule is applied to a nested
table that is editable in
> a template. I'm thinking that the Mac browswers are
moving the image to the
> upper left of the overall, "poppa" table in which the
editable region is
> nested, cutting off that part of the image that appears
in the non-editable
> region of the "poppa" table and showing that part of it
that appears in the
> nested, editable table. I hope that makes sense. Would
applying the placement
> rules help this? If not, what might?
>
> Many thanks,
>
> Jon
>
>
> -
I am working on a site that is done with CSS. I have a couple
of pages posted but am having a problem with the footer. I have
made a wrapper at 100% hoping that the wrapper would always be at
100% of the screen in height. On one page the footer is at the
bottom, but on another page (index) the content is not all the way
to the bottom so the footer won't go all the way to the bottom. The
pages that I have up are located at:
http://www.mts.net/~vmendell/
This is the index and the second page is the Company
Information page. Also if anyone would like to critique the pages I
would gladly accept any and all criticism. One thing, the Flash
animation is just a place holder, the real animation is being
worked on at the moment.
Thank you all in advance for taking the time to look at my
pages and giving any help.
Thank You
Vince Mendella MGDC
graymatter studios
p. 471.4676
e. [email protected]
w. www.graymatterstudios.ca
* Professional Member of the Society of Graphic Designers of
Canada
http://www.gdc.net>
http://www.mts.net/~vmendell/
>
</div>
<div id="bear"></div>
</div>
At the first closing div above, your outerwrapper closes.
Then comes the Bear and finally an extraneous closing div . -
Quick help with css display in IE7
Hi, I haven't been on this forum in ages - I have a slight display glitch would love some help with:
http://magma.ie/magmablog-html/index.html
It looks great in the latest and greatest browser (IMHO!): - firefox 3.5.6
http://cl.ly/17cD
but IE7 pops the search field in the sidebar off to the right, at least, according to browsershots.org
http://cl.ly/1A1f
Thanks, HIt looks OK in IE8 but IE7 is having trouble with the #Sidebar width.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Hi Guys,
Im not very good with CSS and classes, and wondered if any of
you guys could point me to some info on how to get to grips with
external style sheets, whats best and how to use them and set them
up.
Ive never realy looked into this much and at college way back
we did HTML and css was never mentioned so Ive always just used
DW's inline formatting to get what I want but see the appeal of 1
style sheet 1 change at times.
Also Id like to smarten my forms and form elements up a
little and give a neater look and wondered if there were any pre
made style sheets or CSS out there that i could use instead of
trying out combinations of styles...??
Any support in this area is greatly welcomed.
Thank you.
Taghttp://apptools.com/examples/pagelayout101.php
http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Tag2007" <[email protected]> wrote in
message
news:eq6e1e$dq8$[email protected]..
> Hi Guys,
>
> Im not very good with CSS and classes, and wondered if
any of you guys
> could
> point me to some info on how to get to grips with
external style sheets,
> whats
> best and how to use them and set them up.
>
> Ive never realy looked into this much and at college way
back we did HTML
> and
> css was never mentioned so Ive always just used DW's
inline formatting to
> get
> what I want but see the appeal of 1 style sheet 1 change
at times.
>
> Also Id like to smarten my forms and form elements up a
little and give a
> neater look and wondered if there were any pre made
style sheets or CSS
> out
> there that i could use instead of trying out
combinations of styles...??
>
> Any support in this area is greatly welcomed.
>
> Thank you.
> Tag
> -
I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
width:97%;
#container {
min-height: 1000px;
width:100%;
min-width:850px;
border-color:#000;
border: solid 2px;
alignment-baseline:middle;
margin:25px;
#header {
float:left;
#collage {
float:right;
width:202px;
#menu {
margin-top:20px;
height:30px;
float:left;
clear:left;
#MenuBar1 {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
clear:inherit;
#meat {
float:left;
clear:left;
/* [disabled]max-width:600px; */
padding:20px;
padding-left:40px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
clear:both;
width:100%;
height:auto;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!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" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Welcome to KIDS care Colorado.com!</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><span id="MenuBar1"><a href="#">Home</a>
</span>
</div>
</li>
<li><span id="MenuBar1"><a href="#">Programs</a></span></li>
<li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
<li><span id="MenuBar1"><a href="#">Donate</a></span></li>
<li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>
<!-- TemplateBeginEditable name="meat" -->
<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>
<!-- TemplateEndEditable -->
<div id="footer">
<div align="center">
<p> </p>
<p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
<p>PO Box 19442 • Boulder, CO 80308
</p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Maybe you are looking for
-
Dear all while reversing material document generated through 521 movement type system is giving message (field selection for movement type 522/acct 412019999 differs for business area (033) although no business area with this number 033 is defined ki
-
[Solved] Cannot compile, data dump error (Perl)
I'm not a developer, so this may be something simple. I'm trying to get a package to compile and I get this error: autoreconf: Entering directory `.' autoreconf: configure.in: not using Gettext autoreconf: running: aclocal --force Perl API version v5
-
Button in CV02N over DOCUMENT_MAN02
Hi all, I'm actually trying to implement a new function over the customer function codes in transaction CV02N. I have create the interface and all the other stuff. The only open question for me is how to get the button on the screen without a modific
-
P2 card files from Panasonic 200 camera. Why do they require rendering?
Hi! I am doing a HD project shot in 1080 and after I successfully imported all the files from P2 card, they require rendering (which takes about 4 times the real time). Is this normal? I thought that no rendering is required, when you go from P2... P
-
I am confused about capture now. When I clicked on NOW to capture a 30 min clip, I thought it was going to divide the big captured clip into divided clips based on stop and starting when shooting. When it finished capturing the big clip, I hit esc. a