Jump to content


Photo
- - - - -

Padding in header


This topic has been archived. This means that you cannot reply to this topic.
12 replies to this topic

#1 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 02 February 2011 - 07:44 PM

Hi I have all the posts re this problem and have tried every solution but I still have padding in my header. My test site is located at

Please Login or Register to see this Hidden Content

I have a text widget in the header as I wanted to add my own graphic menu to the site so this was my way around it. I have trawled through the css and have remove all padding. Have the following implemented, but still have the padding. Please help. body #page .content-pad {margin: 0px;padding: 0px;} .content-pad {margin: 0px; padding: 0px;} #branding .content-pad{padding: 0px;margin: 0px;}

#2 arpowers

arpowers

    Founder

  • Administrators
  • 3271 posts

Posted 03 February 2011 - 02:20 AM

What's the padding you're trying to remove?. you have a lot going on there, that isn't done by 'best practice' e.g. using a sidebar and inline CSS. So its a little hard to see what's going on. On the other hand, its looking nice!

#3 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 03 February 2011 - 09:58 AM

Hi Andrew thanks for your reply, I needed a graphic based and linked menu in the header and this was the only solution I could fine to include this. My problem was I needed to push the header to the top of the page. But I put body #branding .content-pad { margin-top= -13px; } into the Custom CSS, and this now works. Can you tell me if I wanted to add a background image to the sidebar or to individual widgets is this possible thorough Custom CSS?

#4 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 03 February 2011 - 02:25 PM

Hi Bren - Yes, that's possible... If you need assistance with it, let us know.

#5 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 03 February 2011 - 02:40 PM

Hi Kate, Having real problems with my customised header. When I embedded my hard coded html and css into a text widget on the uninversal sidebar widget, and then popped the universal sidebar into the "site header" template set-up it worked in firefox only. So back to the drawing board, can you advise me on the best practice for implementing a custom header as I do not require anything in the header apart from my code which I will put online into a standard html file so you can see it seperatley. I know it's probably unusual not to have a HTML top level navigation but this is what my client required. I'll submit the link the header.html is a few minutes. Thank you for your time

#6 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 03 February 2011 - 03:01 PM

Hi Kate The link for my header is here

Please Login or Register to see this Hidden Content

as you can see I have a bkg for text widget book now which also does not appear. I did a W?? validator on the site and is states an error with Line 54, Column 123: Element style is missing required attribute scoped. ??¦fix"><div class="widget-pad"> <div class="textwidget"><style type="text/css"> Attributes for element style: Global attributes media type scoped Also, the title attribute has special semantics on this element.

#7 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 03 February 2011 - 03:09 PM

Hi kate, would you believe just after I sent the second email I got it working, basically I have my css file in the root and not in the themes folder and it now works in all browsers. I also removed a lot of the bad coding I had in the widget so it is validated. So can I ask you how to add the a background behind the sub nav widget.

#8 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 03 February 2011 - 05:43 PM

Looks like the id for that widget is wenderhostsubpages-3 so you would use CSS like this `#wenderhostsubpages-3 {background:url('/image.png') no-repeat;}`

#9 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 03 February 2011 - 06:25 PM

great stuff that worked a treat, odd I had thought of that yesterday and tried it and it didn't work!! Thanks I also am trying to establish the best method to create a background image behind the body content area. See

Please Login or Register to see this Hidden Content

To explain, currently I have hard coded the style in rather than creating a box with the style linked to it so when a user types the content they don't have to be concerned whether or not the <div> is closed. this is the HTML, is there a better practice to create a ONE row/column box with a style linked to it? <h1>The Hostel</h1> <h2>We pride ourselves on our friendly service</h2> <h3>What we offer</h3> <div id ="topcontent" > TV Lounge Watch DVDs, TV (on our 42" plasma screen), surf the web or just hang out! Bicycle rental Rent bikes and explore Dublin for only ?‚¬12.50 per day Fully equipped kitchen Eating in is the new eating out. Cook up a storm in our fully equipped self catering kitchen Free International Calls Free international calls to landlines from our skype phone. Security lockers laptop safes For storing your valuables .?‚¬1 per day </div>

#10 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 03 February 2011 - 08:44 PM

How can I get my "book now" to overlay slightly on the header, it seems to appear UNDER the header when I add - margin value #booknow {(margin: -20px 0px 0px;)} I tried z index but that didn't work.

Please Login or Register to see this Hidden Content

HTML example here with same -20 margin here and it works,

Please Login or Register to see this Hidden Content



#11 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 04 February 2011 - 06:41 AM

- Background image:

Please Login or Register to see this Hidden Content

- Custom boxes/divs methods:

Please Login or Register to see this Hidden Content

- "Book Now": ` #booknow { background: url("http://www.kinlaydublin.ie/newsite/img/book_now_container.png") repeat scroll 0 0 transparent; height: 213px; left: 620px; position: relative; top: -510px; width: 302px; } ` Is this what you wanted? If not, just change top and left to position it where you want. Thanks, Bryan

#12 brenb

brenb

    Advocate

  • Members

  • 324 posts

Posted 04 February 2011 - 03:29 PM

hi bryan had a look at your tutorial on custom boxes and that is what I have set up, but I wanted to know if there was other method of assigning the div class to a custom box apart from pasting the div HTML code into HTML area of the post content apart. The reason I ask if my client is not tech savy and when he goes to update a page/post he won't be using the HTML tab more like the visual tab and he will just type directly. My concern is that he will delete the <div id ="topcontent" ></div> that i have in the html. tried your book now css it totally disappeared, thanks for your help though, I'll look at the other tutorial now

#13 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 04 February 2011 - 06:55 PM

For the book now problem it's simple...some of the CSS is set to overflow:hidden so... ` #sidebar1, #sidebar2 { overflow: visible; } ` ` .widget { overflow; visible; } ` With the other issue have you considered using a highlight section or maybe create a shortcode to make it easy for him to add back in if he erases on accident?