...

View Full Version : <a>, <p> problems with css



faclimber
12-17-2007, 07:57 PM
i'm recoding this site: chockstoneclimbing.com using div's as opposed to the never ending tables it currently uses.

my two questions:

1. i'm trying to pad the paragraphs 10 px on the left and right side of center_content. when i do so it appears fine in the design view in dreamweaver, but when i open it in ff or safari it doesn't display padded.


2. i'm having a lot of trouble getting the nav_bar links to look the same. i'm open to any suggestions.

thank you.

mark

link to recode attempt: centraloregonclimbing.com

ahallicks
12-18-2007, 09:40 AM
/* Edited with EditCSS */
/**** LINK-tag style sheet chockstoneclimbing.css ****/

@charset "UTF-8";
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #3D3331;
background-image: url(images/home_stripes_bckgd.gif);
}
#container {
height: 1000px;
width: 800px;
margin: auto;
}
/* CSS Document */

#header {
height: 97px;
width: 800px;
}
#nav_bar {
float: left;
width: 300px;
margin-top: 0px;
height: 900px;
font-size: 1em;
background-color: #636466;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #8BA5C5;
}
#nav_bar a:link {
text-decoration: none;
color: #CCCC33;
border: 0px 0 0;
}
#nav_bar ul {
color: #CCCCCC;
text-decoration: none;
list-style-image: none;
margin-top: 0px;
}
#center_content {
background-color: #2C465F;
width: 348px;
height: 900px;
float: left;
}
#center_content img {
margin-left: 12px;
}
#center_content p {
color: #FFFFFF;
margin-top: 0px;
padding: 0 10px;
}
#nav_bar li {
list-style-type: none;
}
#right_content {
float: left;
height: 900px;
width: 150px;
background-color: #3D3331;
background-image: url(images/home_stripes_bckgd.gif);
border-left-width: 1px;
border-left-style: solid;
border-left-color: #8BA5C5;
}
#right_content img {
padding-top: 10px;
}

Swap around your content and right nav divs and everything should work fine

faclimber
12-19-2007, 05:06 PM
ahallicks,
thank you for taking the time to look at my site and help. i wasn't exactly sure what you meant so i copied and pasted your css code into my browser and while it does pad the paragraph correctly, it's also switched it around. i now show the #right_content in the middle and the #center_content on the right.

is this the only way to be able to pad the #center_content paragraph?

my goal with this is to recode the design in all css and div's as opposed to the never-ending tables currently used; however, i'm not allowed to change the style of the design.

forgive me if this is a basic question as i'm new to css but trying to only use it. i've always ( so i thought ) been able to pad the <p> in any given div by using:
#div p
margin-left: 10px;
margin-right: 10px;

i'd appreciate any other help! thank you.

mark

my recode attempt: centraloregonclimbing.com

original table filled site: chockstoneclimbing.com

ahallicks
12-20-2007, 10:55 AM
"Swap around your content and right nav divs and everything should work fine"

Pretty sure I said that in the post above :p

It really is, because at the moment the content div is starting from the very left hand side of the page, so any padding you give won't affect the text until you give it about 500px or something where the padding stretches past that section on the left. It's all to do with the way you have ordered your page in the HTML and while there are fixes for this, it is simply easier to swap things round in the HTML so that the document flow is not affected

faclimber
12-20-2007, 09:26 PM
ok, thanks.

so my next obvious question:
how do i get the center_content to start where it appears it's starting when viewed with the browser? do i need to give it a set width or float it a certain way?

mark

faclimber
12-20-2007, 11:30 PM
so i've reworked the css a bit by giving the center_content a width and floating it right. it's now behaving the way i want but i'm unsure if this is semantically acceptable and if it works in all browsers. i've checked it in firefox, safari and ie7.

is there a better way to do this?

new link: centraloregonclimbing.com/test.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum