Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post

    <a>, <p> problems with css

    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
    Last edited by faclimber; 12-17-2007 at 09:02 PM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Code:
    /* 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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    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
    Last edited by faclimber; 12-19-2007 at 09:11 PM.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    "Swap around your content and right nav divs and everything should work fine"

    Pretty sure I said that in the post above

    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    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
    Last edited by faclimber; 12-20-2007 at 10:29 PM.

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    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
    Last edited by faclimber; 12-21-2007 at 02:19 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •