Support » Fixing WordPress » Four newb questions about CSS/Wordpress

  • RVDA55

    (@rvda55)


    Hello all!

    I’m reasonably familiar with CSS and am using Dreamweaver. Recently I began exploring WordPress and using a base template I started to style and shape my first WordPress theme.

    Here it is; Test Site

    Now I’ve got a few things I’d like to ask..

    1) I’m trying to get the header site title to become black and and orange as I hover over. All without text decoration. I used the !important thingy but that only worked to get the site title black, the underline doesn’t disappear. Also I had to use ‘Black, Orange,’ etc. instead of color coding because for some reason that didn’t work.

    2) I created some divs in header.php and I styled them but for some reason there is vertical spacing between the divs of about 10 pixels. Instead, the darkgray menu bar should be against the darkred menu bar, and the 10 pixels spacing should be below the dark gray menu bar.

    3) I’m still puzzled as to how I can vertically center the div content of #MenuSearchBar and #BottomMenu which are in header.php. ‘Vertical align center’ doesn’t do anything.

    4) Last, if you click on ‘Hello World’ post for example (or any of the links in the posts/widgets section) the text turns white instead of staying black with the orange hover. As if the white color overrides the ‘visited’ links.

    I’m still struggling to understand why the content in different browsers shift (such as the menu items) and how I can keep them ‘in line’ in all browsers.

    Thanks for any help, appreciated!

    Regards, Rudolf

Viewing 14 replies - 1 through 14 (of 14 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    1) I used the !important thingy but that only worked to get the site title black, the underline doesn’t disappear.

    Did you add this CSS:

    header h1 a:hover {
    	color: #F90 !important;
    	text-decoration: none;
    }

    ?

    RVDA55

    (@rvda55)

    Hey, yes I added that, that’s how it is now.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    This CSS is responsible for your missing underline:

    text-decoration: none;

    http://www.w3schools.com/cssref/pr_text_text-decoration.asp

    RVDA55

    (@rvda55)

    Actually that’s exactly what I want, I want the black underline to disappear. Right now it only disappears when you hover over the title.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Then I guess you just need to apply that “text-decoration: none” style to the non-hover state:

    header h1 a:link {
     text-decoration: none;
    }

    RVDA55

    (@rvda55)

    Thanks! That worked. Could you tackle the other issues as well perhaps? 🙂

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    2) There is a margin-top style applied to this div:

    <div class="my_extra_menu_class">

    Set the margin top to zero.

    E.g,

    header .my_extra_menu_class {
     margin-top: 0;
    }

    RVDA55

    (@rvda55)

    Dang it, why did I not see that myself. I’m also wanting a 10px space below that so I changed it to;

    .my_extra_menu_class {
    	margin-bottom: 10px;
    	margin-left: 10px;
    	font-size: 0.83em;
    	text-transform: uppercase;
    }

    Or is that wrong? Because I only see 5 pixels white space instead of 10.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try removing the header height style

    RVDA55

    (@rvda55)

    That worked! It looks like most of the time I simly didn’t clean up remnants of other css ‘experiments’ I conducted.

    Just didn’t know what to look for.

    Hey, if you happen to be on a roll, do you know how I can vertically center the div contents of the #MenuSearchBar and #BottomMenu (in header.php as well)?

    Thanks!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I can’t find the divs with the IDs of “MenuSearchBar” or “bottomMenu”

    RVDA55

    (@rvda55)

    Weird. This is the site; Test site

    They should be in header.php; <div id=”MenuSearchBar”> and <div id=”BottomMenu”>

    In the css it looks like;

    /*Top menu + search bar*/
    #MenuSearchBar {
    height: 31px;
    background-color: #b70002;
    }
    /*Bottom Menu*/
    #BottomMenu {
    height: 22px;
    background-color: #333;
    }

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I advise you seek support from a CSS-specific forum: http://csscreator.com

    RVDA55

    (@rvda55)

    Allright will head down there.

    Thanks so far for your help.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Four newb questions about CSS/Wordpress’ is closed to new replies.