Help with CSS Page Layout
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;
> }
>
Similar Messages
-
Help with dynamic page layouts
Hello JSP Gurus,
I'm attempting to dynamically generate the page layout for my site based on the organization a user belongs to. Basically, I'd have certain resources like navigation links, graphics, etc, that are modular. Then I'd like to construct the layout using these "moduls" in a dynamic fashion. Does anyone have any suggestions on techniques or technologies that would be useful? I'm not really looking at the portal/portlet model. Is this something that Cocoon could do by storing the layout for each customer as an XML file or something? Any ideas, suggestions, experiences would be helpful.
Thanks!How does Tiles differ from the JetSpeed apache
project? They both appear to be portal-like
frameworks, or am I incorrect about that? Which is
preferred?Frankly, I can't give you an in-depth answer to that. Maybe someone else can help with more details.
What I can tell you is that JetSpeed seems to be more of a real portal architecture. Emphasis is placed on the framework portion, interfacing with exisiting applications. Visual layout takes second seat to this.
Tiles on the other hand puts more emphasis on visual layout and reuse.
Just looking at JetSpeed's visual interfacing a little bit makes me really dislike it. You build tables and such inside of a servlet, so there's a tight coupling (or at least, much tighter than with Struts/Tiles) between the presentation and logic. (I'm basing this on a JavaWorld article at
http://www.javaworld.com/javaworld/jw-07-2001/jw-0727-jetspeed.html )
Based on your initial question, it would seem to me that tiles is much closer to what you're looking for (and likely easier to just pick up and use).
Anyway, take all this with a grain of salt; I'm not exactly an expert on JetSpeed. =) -
Hi I am having problems with a page http://beermattonline.co.uk/manuscript_doctor/fees_submissions1.html half way down after the fees sub heading I can't get the next line to appear underneath it instead of to the right. Any suggestions? Here is my CSS.
Thanks in advance, Matt.
.banner {
.line {
margin-top: 5px;
margin-bottom: 5px;
.small_line {
margin-top: 5px;
margin-bottom: 5px;
.long_line {
margin-top: 50px;
margin-bottom: 5px;
margin-left:55px;
marging-right:55px;
.footer {
font-size: small;
text-align: center;
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
background-color:#fff8e8;
border-style:solid;
border-width:0px;
height: 1000px;
.sub_heading {
float:right;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:530px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.sub_sub_heading {
float:left;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:250px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.text_centre {
float:right;
border-style:solid;
border-width:0px;
margin-top:5px;
border-color:#473d33;
position: relative;
width:543px;
background-color:#fff8e8;
.links {
border-style:solid;
border-width:0px;
margin-top:4px;
margin-bottom:4px;
border-color:#473d33;
background-color:#fff8e8;
font-size: small;
text-align:center;
A:link {text-decoration: none; color: #26221e; }
A:visited {text-decoration: none; color: #26221e; }
A:active {text-decoration: none; color: #ffffff; }
A:hover {text-decoration: underline; color: #ff7d3e; }
.float_left {
float:left;
width: 140px;
border-style:solid;
border-width:2px;
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
padding: 5px;
border-color:#ffedc7;
background-color:#fff2d6;
body {
font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
bont-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
background-color:#fff8e8;
letter-spacing: 1px;
color: #4c443c;
h1 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h2 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h3 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h4 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h6 { color: #26221e; margin-bottom:0px; margin-top: 5px;}If you change the next to last style definition in your CSS file "manuscriptdoctor.css" from
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; }
to:
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; clear: both; }
everything should be fine. -
Need Help Starting CSS Page Layout
Hi, I need a little help getting started in creating a CSS
layout page in Dreamweaver CS4. I am following a tutorial online
but I have run into a problem. What I am trying to do is get a
simple CSS layout started. Below I have listed my steps.
1) First I created a new .html page and named it "index.html"
2) Next, in the "Properties" panel I clicked the "CSS" button
3) I then selected the "Edit Rule" button and a window opened
called "New CSS Rule"
4) I then left all default settings and in the window where
it asked me for a name for my selector I typed in:
main_layout.css
Then I got this message below.
"Class names must start with an alphabetical character
preceded by an optional period. There should be no
spaces or additional punctuation."
What am I doing wrong? Can someone please tell me the correct
steps to start a CSS layout in DW CS4?
ThanksUndescore are Ok in CSS, your problem is the starting. When
you define a
class in CSS you have to start the calss name with a period.
Plus they
cannot be a period after so...
If you want to define a class.
main_layout.css is not OK
.main_layout is OK
main_layout is not OK
Putting a ".css" a the end is for a file name not a selector
So with my example .main_layout you would then applie this
class to a tag
like this
<p class=" main_layout">Put text here</p>
Now if you want to define a ID selector then you start tou
selector eith "#"
no quotation mark
so
#container {
position:relative;
background-color: #fff;
width: 800px;
margin: 0 auto;
top: 20px;
border-top: 0;
border-right: 1px solid #b7b7b7;
border-bottom: 0;
border-left: 1px solid #b7b7b7;
And then you apply this as an id
<div id="container">Put content here</div>
Do you get it. If not then go get a good book on CSS.
aka Frenchy ASP
"tweened" <[email protected]> wrote in
message
news:ge27el$a8i$[email protected]..
> I'm still learning CSS myself. But I have never seen a
style sheet name
> with an
> underscore in it or any punctuation for that matter. If
you look at the
> last
> sentence in the error message you got, It tells you that
no additional
> punctuation can be used. Try using "style" as your css
name. the same
> would go
> for the property tags within the style sheet, don't use
any punctuation in
> the
> names.
> -
Help with CSS beginner layout problem?
Making my first CSS website. See http://www.capeannphysicaltherapy.com/index-test.html
The DIV layout held up fine even after I copied text into the #main_text DIV. But when I turn it into html the #main_content DIV jumps down even though the text stays in place. I'd appreciate any help.
ThanksIncrease text size in browser (Ctrl+++) Zoom, text only - to test your pages.
Get rid of DIV container HEIGHT-itis:
#container {
width: 812px;
background: #FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 566px; **remove me, no height is needed here**/
#left_container {
width: 222px;
float: left;
background-image: url(images/banner_left.gif);
height: 566px; /**remove me**/
min-height: 566px /**for non-IE browsers only**/
#main_content {
background-image: url(images/content_area.gif);
height: 370px; /**remove me**/
min-height: 370px; /**for non-IE browsers only**/
width: 590px;
Web pages need to be flexible. Do a Google search for "CSS Min- & Max width" and "CSS Min- & Max heights."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com -
Adobe recommends: CSS page layout basics
Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Continuing on our quest for great layout tips, our next recommendation comes from yours truly:
CSS page layout basics
This article takes you through the A-Z of what makes up a basic CSS layout. It also shows you how to use some of the CSS layouts that come packaged with Dreamweaver.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101Although I love sending newbies to tutorials, I am sometimes stuck with a quandary especially when I see the word basics.
To me, a basic layout does not require any more than
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {width: 960px; margin: auto;}
#header {height: 85px; background: #060;}
#nav {height: 35px; background: #000;}
#aside {height: 400px; width: 180px; background: #999; float: left;}
#article {margin-left: 200px;}
#footer {height: 35px; background: #000; clear: both;}
</style>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="aside"></div>
<div id="article"></div>
<div id="footer"></div>
</body>
</html>
In the above I have used fixed heights. That is because I have not placed any content into the div elements, but still wanted to show the outcome.
When the basic layout has been settled on, we can start with our niceties like resetting styles, padding for the content etc. I have noticed that David Powers has written an article (which I have not as yet read) on Modernizr wich will help as a good starting point.
The main thing to keep in mind is to keep it simple.
Gramps
Oops! Sorry! the Modernizr article goes way beyond the basics. Please only tackle this if you are brave enough. The reason I thought that it may be a good starting point is beacause I have been using HTML5Boilerplate (which includes Modernizr) for quite some time now.
Message was edited by: altruistic gramps -
"inc" extension wont display in css page layout
i am new to building pages with css. all i know is table based layouts. im trying to make a new template for my sites. also they are ASP pages. my problem is when im trying to use the "inc" code for my headers, footers, navigation, and a right menu. they dont display.
what would be different for getting those files to display in a css page layout?You're close but you're missing quotes around your include file names. And your includes contain too much information.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
HeadMenu.ssi
LeftLinks.ssi
Footer.ssi
My parent page has been saved as Untitled.shtml (.shtml or .shtm tells the server there are include statements in the page). You may also use .php or .asp if your server supports these, however those include statements look different from the ones in this demo.
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<!--#include virtual="Includes/HeadMenu.ssi" -->
<!--end header --> </div>
<div id="sidebar1">
<!--#include virtual="Includes/LeftLinks.ssi" -->
<!--end sidebar1 --> </div>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
<!--end mainContent --> </div>
<div id="footer">
<!--#include virtual="Includes/Footer.ssi" -->
<!--end footer --> </div>
<!--end container --> </div>
</body>
</html>
My HeadMenu.ssi file looks like this with only the relevant menu code.
<div id="menu">
<a href="#content">skip menu ></a>
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="links" href="links.php">links</a>
<a class="contact" href="contact.shtml">contact</a>
</div> <!--end menu -->
You can see a working example of this on my website: http://alt-web.com
One last thing, you won't see includes appear on in browser until you publish to a web server. If you want to test pages locally, you'll need to install a local testing server (WAMP, XAMP, MAMP) on your computer.
Ask your server host if they support SSIs and whether or not .shtml or .shtm files are set-up up to parse includes. Sometimes you need to add this to your .htaccess file.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb -
Help with creating a layout.
I need help creating a layout for my program, but am having tons of problems. I just an't that good at creating this, and it's been driving me insane.
Here's the link to how I want it to look like. http://s94182144.onlinehome.us/randomstuff/layout.JPG
In panel 1... that will be a cartesian plain, so it will pretty much be empty until lines and stuff are drawn in there.
In panel 2, there will be two drop down menus and a couple of buttons
In panel 3, there will be a bunch of things, with two buttons on the bottom.... and this section has to be scrollable.
Any help with the basic layout will be helpful... I can put in the buttons myself. For reference, the whole programs size is 400x800.
Thanks,
sachitRead this section from the Swing tutorial on [url http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html]How to Use Layout Managers. You can combine multiple Layout Managers to get the effect your want. By default the content pane uses the BorderLayout, so one approach might be:
JPanel center = new JPanel(new BorderLayout());
center.add(panel1, BorderLayout.CENTER);
center.add(panel2, BorderLayout.SOUTH);
getContentPane().add(center, BorderLayout.CENTER);
getContentPane().add(panel3, BorderLayout.EAST);
It turn you would layout panel1, panel2 and panel3 with the appropriate layout manager. Panel2 could be something like:
JPanel panel2 = new JPanel( new BorderLayout() );
panel2.add(comboBox1, BorderLayout.WEST);
panel2.add(comboBox2, BorderLayout.EAST);
JPanel bottom = new JPanel();
bottom.add(button1);
buttom.add(button2);
panel.add(bottom, BorderLayout.SOUTH); -
Hi
Does anyone can help me ?
I created a web and now I am creating a second folder/ file. How can I link this second folder to the home page placed in first folder ?
Sorry for my EnglishHi Cari
Tanhks for you help. This open my mind, you mean I need to have two website to this ?
I ask you this because I have only one website. the acces to my site is only through customer site. I mean I give him the right link (one link for Company A and another link for company B, both coming from site), do you understand what I mean?
The point I do not understan is if I save file web A, as Web B and then I change page names, master and so on, and the I up load, why does muse overwrite in file A when pages are different name !!!!
The point is Muse does not allow to copy / paste !!!
Any idea Cari
Regards from Buenos Aires
Felix Cano Montoya
[email protected]
El 11/4/2015, a las 23:21, Cari Jansen <[email protected]> escribió:
Help with home page link
created by Cari Jansen <https://forums.adobe.com/people/Cari+Jansen> in Help with using Adobe Muse CC - View the full discussion <https://forums.adobe.com/message/7430081#7430081>
I'm not sure I've got a grasp on the issue you are having but let me give it a try
Website A is finished and you have uploaded it to the Internet, so it is LIVE.
You make a copy of Website A, and call it Website B, then make all required changes.
IF you uploaded Website B, then it is likely you will overwrite Website A. You must instead, upload Website B as a separate Website.
To publish to a new site:
Click Publish.
Then click the expansion triangle left of Options.
Change Publish To setting to New Site
fill out rest of required details, and click OK to publish.
You'll now have two separate web-sites.
If you need to link between them, use absolute hyperlinks (the full URL).
Hope this helps.
If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/7430081#7430081 and clicking ‘Correct’ below the answer
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:
Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/7430081#7430081
To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"
Start a new discussion in Help with using Adobe Muse CC by email <mailto:[email protected]> or at Adobe Community <https://forums.adobe.com/choose-container.jspa?contentType=1&containerType=14&container=47 61>
For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624 <https://forums.adobe.com/thread/1516624>. -
Beginner needs help with css layout
i'm new to using dw (cs3) and css, though i have some
background in html and coding. i'm creating a page using the "one
column elastic, centered, header and footer" layout and i have a
banner header with a horizontal spry menu bar at the bottom of the
header. the background color of the buttons on the menu bar is red,
and there's a yellow 5px border on the top and bottom of the red
menu bar, so it looks like there's red bar with yellow piping above
and below it, and this bar is between the header and body section
of the page. i've set these colors in the "ul.MenuBarHorizontal a"
rule.
now, the issue i have is that my menu bar does not extend
across the entire column, so there's empty space to the right of my
menu bar (between the end of the menu bar and the far right
column). i'd like the look of the red and yellow menu bar to extend
all the way across, but i can't figure out how to do this in css.
do i:
extend the menu bar all the way across the width of the page?
i can't figure out how to do this.
insert an image to make it appear as though the red and
yellow bar keeps extending to the right? if so, how will that image
remain elastic along with my page?
or is there a better solution?
i'm very new to css and i'm doing my best to figure out how
everything fits together. the last web site i built was in 1997 and
it was done in notepad. any help would be tremendous. i'm in
kinshasa, in the democratic republic of congo, and truth be told
there aren't a lot of dw gurus out here.
thanks in advance...Can you post a link to your page, please?
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
==================
"charliemooreiv" <[email protected]> wrote
in message
news:[email protected]...
> i'm new to using dw (cs3) and css, though i have some
background in html
> and
> coding. i'm creating a page using the "one column
elastic, centered,
> header
> and footer" layout and i have a banner header with a
horizontal spry menu
> bar
> at the bottom of the header. the background color of the
buttons on the
> menu
> bar is red, and there's a yellow 5px border on the top
and bottom of the
> red
> menu bar, so it looks like there's red bar with yellow
piping above and
> below
> it, and this bar is between the header and body section
of the page. i've
> set
> these colors in the "ul.MenuBarHorizontal a" rule.
>
> now, the issue i have is that my menu bar does not
extend across the
> entire
> column, so there's empty space to the right of my menu
bar (between the
> end of
> the menu bar and the far right column). i'd like the
look of the red and
> yellow menu bar to extend all the way across, but i
can't figure out how
> to do
> this in css.
>
> do i:
>
> extend the menu bar all the way across the width of the
page? i can't
> figure
> out how to do this.
>
> insert an image to make it appear as though the red and
yellow bar keeps
> extending to the right? if so, how will that image
remain elastic along
> with
> my page?
>
> or is there a better solution?
>
> i'm very new to css and i'm doing my best to figure out
how everything
> fits
> together. the last web site i built was in 1997 and it
was done in
> notepad.
> any help would be tremendous. i'm in kinshasa, in the
democratic republic
> of
> congo, and truth be told there aren't a lot of dw gurus
out here.
>
> thanks in advance...
> -
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' :) -
Need help with Fluid Grid Layout and variable column balance.
I'm using the fluid grid layout. I have multiple columns that are actually fluid grid layout columns done by Dreamweaver. I'd like them to extend as high as each other (all to the maximum height of each other) within the same section. An added catch is that in the desktop layout, I have three side by side under one that takes the whole width of the page. On tablet size, it's 2x2 in a square grid. On mobile, they're vertically stacked. I'm trying to get it so that background colour and/or borders looks decent and is fully balanced, no matter which layout is hit with the fluid layout. The columns reflow, no problem. But the height of any background and/or border is variable.
Any help on fixing this?
Example at: https://music2help.thoughtburst.net/
The example doesn't have borders or colours, as it looked silly unbalanced. The music2help.css is the only one I'm modifying manually.
Love the fluid grid layout, but I need a way to make it behave decently with backgrounds/borders. Any help would be hugely appreciated!
Thanks!
mark->I tried the solution Nancy posted. It altered things, but doesn't seem to do the trick.
Just some quick background. I did HTML from 1994 through about five years ago by hand in vi on *nix systems. I learned HTML through 4.01, and never bothered with XHTML at all. I learned CSS through most of CSS2. The CSS3 and HTML5 stuff is all new to me, but it can't be that hard. I'm not exactly a novice in JS (I've done a fair bit of AJAX programming), but it's not even close to my primary language (I'm a Perl guy).
I'm "stuck on" wanting to use Fluid Grid Layouts. It's billed as one of the selling points of DW CS6, and I really like the concept and results. I just want the results embellished a little, namely with sensible identical heights on grid containers set in the same row, so that you can apply background colours, dropshadows, and borders. That's really all I want to do that it doesn't already do.
I have a test page at: http://music2help.thoughtburst.net/ that you can try with your Quick Columns. I'd be interested to know if you can get it to work.
Here's the catch, though... Resize the browser, shrinking it inwards. (I suggest Firefox, as Chrome only shrinks so far, and you won't get to Mobile width.) As you can see, on a Tablet, one of the columns that should be equal height actually moves up a row and should be equal height with the row that, on a desktop, would take the entire width of the page area. So that's like a 4-up output in printing terms. At Mobile size, the entire thing is vertical, so none of the columns should be resized.
If your product works and can accomodate these conditions, I think I would be interested in spending the $35 it costs.
Let me know? Thanks!
EDIT: Changed URL to be non-SSL. The server has multiple vhosts on it, and I keep forgetting that I don't have a cert on this new one. Sorry about that. You can just add anything to one of the the three middle columns, if you're pulling it down to test. -
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 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
>
>
> -
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
>
>
>
Maybe you are looking for
-
Installing Aperture 3 onto new MacBook Pro
Hi Support Team, I own a copy of Aperture 3.0 (on disk); I bought the software back in 2010 when it was first released and have been running the software on my MacBook Pro (2009 model). Now, I have bought the new MacBook Pro Retina and installed Moun
-
Hi All, Sometimes the flexfield from the task tab in the service request doesn't open, as if it is inactivated. This is a random stuff and we couldn't find the reason. Did one of you had the same problem? Thanks, Dora
-
Discoverer 3.1 Turorial PDF
I am trying to get the PDF version of the Discoverer 31 enduser tutorial. Does anyone know where I can get it. The only ones that are online are the 4.1 and greater. Any help would be greatly appreciated.
-
How do I download past purchases without paying for them again?
I am having problems locating audio files that I previously purchased. Specifically, i purchased and downloaded the entire Ricky Gervais Show series approximately two years ago. When i search for these files in itunes, it only allows me to purchase
-
Charts x axis values really long
I can't find a way to format these x values... they always change to this really long string of numbers