Jump to content

Making Changes To Pages & Div Placement


DaVor

Recommended Posts

1. Hi, I need to make some minor adjustments (editable area need to be in large, and sub-menu need to be change). How do I make thees changes so that it will replicate to the other pages. I'm not sure which page to use.

 

2. Also how do you keep a div from moving down the page, I tried all three or 4 positions,(static,absolute and so on).

 

Thanks much :unsure:

 

DaVor

Link to comment
Share on other sites

Hi, Andrea

 

I just start building this project about 2 months ago. I've never build a website before. I was offered this job after being laid off. I've learned a lot, but a lot I don't understand yet. They also know that I'm not a web designer by trade, I'm a nerdy computer guy. But I love taking on a challenge.

I plan to change the spry menu-bar to a css driven one, the spry one isn't very responsive enough. Thanks so much for your help.

 

 

 

 

<!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="CSS/StyleCSS.css" rel="stylesheet" type="text/css" />

 

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

 

</head>

 

<body>

 

<div id="Master">

 

<div id="logo">

<div id="picture"><img src="images/ICF (Symbol).JPG" width="264" height="235" />

<div id="whatever">Content for id "whatever" Goes Here</div>

<div id="moto">

<h2>The Bible is Our Authoritative Guide for Life and Ministry</h2>

</div>

</div>

</div>

<div id="content">

<div id="text">Content for id "text" Goes Here</div>

<div id="moto_2">Intergrity: incorruptibility; soundness; completeness; honesty</div>

</div>

<div id="menu_control">

<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a class="MenuBarItemSubmenu" href="index.html">Home</a>

<ul>

<li><a href="webpages/Vision_Mission.html">Vision & Mission</a></li>

<li><a href="webpages/Our Objectives.html">Our Objectives</a></li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Our Ministries</a>

<ul>

<li><a href="#" class="MenuBarItemSubmenu">Christian Education</a>

<ul>

<li><a href="webpages/Church_School.html">Church School/Training</a></li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Missions</a>

<ul>

<li><a href="webpages/Brotherhood.html">Women/Brotherhood</a></li>

<li><a href="webpages/Music_Ministries.html">Our Music</a></li>

</ul>

</li>

</ul>

</li>

<li><a class="MenuBarItemSubmenu" href="#">Contact Us</a>

<ul>

<li><a href="webpages/Prayer_Request.html">Prayer Request</a> </li>

<li><a href="webpages/Our_Meeting_Times.html">Our Meeting Times</a></li>

<li><a href="webpages/Our_Services.html">Our Services</a></li>

<li><a href="webpages/Directions.html">Directions</a></li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Upcoming Events</a>

<ul>

<li><a href="webpages/Archive_of_Services.html">Archive of Services</a></li>

<li><a href="#" class="MenuBarItemSubmenu">Media</a>

<ul>

<li><a href="webpages/Event_in_Pictures.html">Events in Picture</a></li>

<li><a href="webpages/Our_Music Lib.html">Our Music</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="webpages/Duties.html">Members</a></li>

</ul>

</div>

</div>

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

 

 

CSS................................

@charset "UTF-8";

#Master {

width: 1025px;

background-image: url(file:///DATA/WEBSITES/Integrity Christian Fellowship/images/ICF%20background.jpg);

height: 1200px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

background-image: url(../images/ICF%20background.jpg);

}

#content {

height: 606px;

width: 955px;

clear: both;

margin-left: 36px;

background-color: #EDCA22;

margin-top: 6px;

padding-top: 133px;

background-image: url(../images/Cool-Paper-Background.jpg);

background-repeat: no-repeat;

background-position: center;

border-top-color: #EACC25;

border-right-color: #EACC25;

border-bottom-color: #EACC25;

border-left-color: #EACC25;

}

#picture {

height: 239px;

width: 260px;

float: left;

margin-top: 6px;

margin-right: 6px;

margin-bottom: 6px;

margin-left: 6px;

border-top-color: #E7CE27;

border-right-color: #E7CE27;

border-bottom-color: #E7CE27;

border-left-color: #E7CE27;

}

#menu_control {

height: 53px;

width: 800px;

margin-left: 173px;

margin-top: 9px;

}

#whatever {

height: 163px;

width: 669px;

margin-left: 269px;

margin-top: -200px;

background-color: #EACC25;

border-top-color: #E7CE27;

border-right-color: #E7CE27;

border-bottom-color: #E7CE27;

border-left-color: #E7CE27;

}

 

 

 

 

#moto {

height: 46px;

width: 670px;

float: none;

margin-left: 270px;

margin-top: 6px;

font-family: Georgia, "Times New Roman", Times, serif;

background-color: #542C09;

text-align: center;

padding-bottom: 13px;

margin-bottom: 6px;

border-top-color: #936C10;

border-right-color: #936C10;

border-bottom-color: #936C10;

border-left-color: #936C10;

color: #E7CE27;

font-size: 14px;

font-style: italic;

line-height: 60px;

}

#moto_2 {

height: 13px;

width: 500px;

margin-left: 200px;

color: #EACC25;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 8px;

font-style: italic;

text-align: center;

border-top-color: #000;

border-right-color: #000;

border-bottom-color: #000;

border-left-color: #000;

margin-top: -9px;

}

#text {

height: 525px;

width: 700px;

margin-left: 125px;

border-top-color: #4D2405;

border-right-color: #4D2405;

border-bottom-color: #4D2405;

border-left-color: #4D2405;

margin-top: -12px;

}

#content #text h2 {

text-align: center;

font-family: Georgia, "Times New Roman", Times, serif;

}

#content #text p {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 17px;

text-indent: 22px;

margin-top: -22px;

line-height: 26px;

}

#content #text h3 {

font-family: Georgia, "Times New Roman", Times, serif;

margin-left: 6px;

line-height: 33px;

}

.contact {

text-align: left;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 20px;

line-height: 33px;

}

Link to comment
Share on other sites

HTML

  1. Get a hosting account somewhere - it's always easier to be able to see how things really look like online even as you work on your site.
  2. Xhtml is usually not the correct doctype. Cut through the chase and use the HTML 5 doctype - see add'l detail about the head section here: http://www.how-to-build-websites.com/2012/html5-head-section/
  3. Add a title to your pages
  4. Stick to lower-case letters when naming IDs', classes, files, etc. and don't put spaces in file names. Upper case letters are not wrong, but you'll save yourself a lot of trouble over time, trying to figure out why something isn't working, only to discover that image.jpg is not the same as Image.jpg.
  5. Check your menu list - there are several opening -closing errors in there. I wasn't sure how you wanted it, so I deleted all but a small portion that shows how a list and sublist should look like.

CSS

  1. You don't need a charset in your css
  2. Use the universal reset
  3. use shortcuts
  4. You can only have one background image per tag. Your Master ID has two.
  5. borders don't just need colors, they need the type and width, too.
  6. Put quotes around the url
  7. some of your image urls lead to files on your computer
  8. It's usually not a good idea to set div heights as the content tends to vary.
  9. The image inside your picture division is larger than the division itself
  10. You only clear things that follow floats
  11. There is no such thing as a float: none;
  12. I find it better to work the CSS in the order as things appear. Helps prevent overriding stuff.

These are just a few items to begin with. I made the changes I mentioned, added background color to some of the divisions only so it's easier to see where what is.

 

http://aandbwebdesign.com/KSforum/devor.html

 

Overall, I think you have way too many IDs - not everything needs one.

 

Since I'm not sure where you want things, it's kind of hard for me to line things up. If you give me a better idea where you want what, I'll be happy to help get things there.

 

Let me know if you have any questions.

Link to comment
Share on other sites

Hi Andrea,

 

Thanks for your input, I'll work with the suggestions that you given me and go from there.

They do have a hosting service, just have not figured out how to upload it.

Everything that I've done is from video tutorials and web searches. But anyway, I'll get back to you after making changes to get more input.

 

I do have a question, I went through the experience of making a CSS menubar, because the spry one wasn't responsive when the mouse rolled over it. I find that the CSS one does the same thing. Should I not worry about this until I see it live to see how it reacts?

 

Thanks again for your help, you'll hear from me again. :)

 

DaVor

Link to comment
Share on other sites

Hard to say - I just removed the entire spry code for now, as I wasn't sure if'/how that might be messing with the rest or your layout. I figure get your basic structure down and then deal with the menu. I've never used a spry menu, but depending on what you're looking for, CSS can probably do the same or at least something similar.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...