Problem with CSS Amateur warning!

[reeksy86]

Hey all,

Looking for a bit of help, one user on here has been great, but i dont want to keep pestering him with what is probably trivial issues,

Basically, i have my website up and running, however i seem to have made a right mess of a css rule, On the Heading http://www.giveyourdogagroom.com you will see a white box (rounded edges) behind the text, basically i need to recreate it again, for all the text sections throughout the site.

Secondly, down the left hand side, is there a way i can make the white nav panel background transparent or even remove it all together, so that just the paws/text is showing?

Appreciate your help as always

 

[sprucemagoo1]

The white boxes around the text use the same background image as the nav. If you want to remove the background to the nav, look in the .css file for a bit the will start "#nav_panel{" and delete the background rule. If this is what you are going to do, I would recommend doing an inner and outer glow to the buttons in the nav panel.

If you look at this code,

<div id="section_pad">
 <div id="white_bground"> 
    
Element that goes in the boxes.

</div> 
</div>

Wrapping anything in these div tags will create a white box with rounded corners. Remember, if you don't close the tags properly the boxes will join together, instead of floating apart.

 

[reeksy86]

Right, I think I get you, so for every rule <div element > there needs to be a </div> hence the reason for 2 </div>'s at the end of the code?

Thanks


Reeksy

Sent from my iPhone using Tapatalk

 

[reeksy86]

managed todo some playing about now and getting morec confident with css, but am still struggling to space the sections correctly, the white box element is all over the place, and cant get it right at all. Any help? (link to website so you can see the differences i mean, between pages, on the animated banner) http://giveyourdogagroom.com/index.html
Cheers

 

[sprucemagoo1]

This is what you have put as the animated banner

<div id="content">
<div id="section_pad">
  <h1 align="center"><script src="http://h1.flashvortex.com/display.php?id=2_1350510381_45048_810_0_468_60_9_1_90" type="text/javascript"></script> 
</div>
</div>

So you have now got 2 content divs in the page, which is not good. I think the banner would look better without the white box, and without so much space. Advertising for other people should only take as much space as it needs.

 

[Berbatov]

You also have a problem in your code regarding closing div-tags. You open 22 divs but you close 24 of them. You should sort that out, specifically the content div, which you open twice

 

[reeksy86]

right, ok, i am lost again now! sorry! i didnt really want the white box around the banner anyway, so i would need to lose the 'section pad' div rule?

How would i know which div rules to get rid of, does it matter? and related to that, how would i seperate the space between the sections, to make them the same throughout the page, it doesnt seem as easy as entering a blank css line.

Also, why cant i seem to get anything centered on the page, it is either over to the left too much, or sends other parts of the page out of sync.

 

[Berbatov]

right, ok, i am lost again now! sorry! i didnt really want the white box around the banner anyway, so i would need to lose the 'section pad' div rule?

How would i know which div rules to get rid of, does it matter? and related to that, how would i seperate the space between the sections, to make them the same throughout the page, it doesnt seem as easy as entering a blank css line.

Also, why cant i seem to get anything centered on the page, it is either over to the left too much, or sends other parts of the page out of sync.

Change

<div id="content">
<div id="section_pad">

<h1 align="center"><script src="http://h1.flashvortex.com/display.php?id=2_1350510381_45048_810_0_468_60_9_1_90" type="text/javascript"></script><!-- WARNING : SWF FILES THAT ARE ACCESSED BY URL WILL BE DELETED, SWF FILES ABUSING SYSTEM RESOURCES WILL BE DELETED --><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="60" width="468"><param name="movie" value="http://h1.flashvortex.com/files/90/2_1350510381_45048_810_0_468_60_9_1_90.swf"><param name="quality" value="best"><param name="menu" value="true"><param name="allowScriptAccess" value="always"><embed src="http://h1.flashvortex.com/files/90/2_1350510381_45048_810_0_468_60_9_1_90.swf" quality="best" menu="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="always" height="60" width="468"></object>
</h1></div>
</div>

to

<div id="content">
<script src="http://h1.flashvortex.com/display.php?id=2_1350510381_45048_810_0_468_60_9_1_90" type="text/javascript"></script><!-- WARNING : SWF FILES THAT ARE ACCESSED BY URL WILL BE DELETED, SWF FILES ABUSING SYSTEM RESOURCES WILL BE DELETED --><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="60" width="468"><param name="movie" value="http://h1.flashvortex.com/files/90/2_1350510381_45048_810_0_468_60_9_1_90.swf"><param name="quality" value="best"><param name="menu" value="true"><param name="allowScriptAccess" value="always"><embed src="http://h1.flashvortex.com/files/90/2_1350510381_45048_810_0_468_60_9_1_90.swf" quality="best" menu="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="always" height="60" width="468"></object>
</div>

(remove one div-pair and the h1 tags)

and you will have the same spacing between your boxes (due to the div removal) and the banner-box will not be shaded (due to the h1 removal).

Can you be more specific about the other issues?

 

[sprucemagoo1]

One of the first things you should have done before thinking about taking this task on, is learn how the the structure of a html page works. Learning the different tags, what they mean, and where they go, are vital to making any website. The info is all there in the link I gave you, w3 school is the best free info on this on the web.

 

[reeksy86]

I think i should have, im more a practical guy, so just get into it, but need to take a few lessons as well!

 

[Berbatov]

Maybe you should also check out the html code of the about page. The spacing between the first two boxes differs on that page so it's not due to css code

 

[sprucemagoo1]

No, it's because there is 3 content divs, and 3 divs that create padding. If you carry on putting random divs round all the elements, you will ruin the pages. The pad div creates padding for what ever it surrounds, and will create a certain amount of padding each time it is used. The content div is meant to be the main column of content, ie, there is only one content column, so you only use one content div.