make div width for header WordPress
- SOLVED
Hi, I got great help here last night to make the roll over effect on the header. Tonight I would like to control the width of just the "one-half" and "one half Last" of only the divs in that header area. I don't want the shortcode to alter all the one half or one half last.
http://203.170.85.26/~rocksoli/
Here is the CSS I have already, I think I am on the right track, but I do not know which one to select to alter the width of the Phone and Email "one-half"
(What I would like is the blocks for email and phone to be width 44% with margin-right 3%)
#one_half, phone, email {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}
Above is what I am trying to do, but I know the css selectors are wrong, I just need help to correct it.
Thank you.
Answers (3)
Martin Pham answers:
try this
.one_half .phone, .one_half .email {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}
Martin Pham comments:
readmore
[[LINK href="http://www.ravenglass.com/blog/index.cfm/2009/5/8/CSS-Child--Descendant-Selectors"]]http://www.ravenglass.com/blog/index.cfm/2009/5/8/CSS-Child--Descendant-Selectors[[/LINK]]
Ciaran Whelan comments:
Hi Martin, I tried that, but it did not work correctly. I almost thought it would work perfect with your code. Thank you for giving me the link to learn more on selecting Child descendant Selectors. As I couldn't for the life of me figure out the name for this. This is my greatest weakness trying to figure out the child selector.
Arnav Joy answers:
go to line no 51 to your style file at following location
~rocksoli/wp-content/themes/rocksolid/css/text.css
find out following lines
.one_half {
display: inline;
float: left;
margin-right: 4%;
overflow: hidden;
position: relative;
width: 48%;
}
and replace with
.one_half {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}
Arnav Joy comments:
i would also like to tell you what you are not doing in your following code
#one_half, phone, email
"#" symbol is used for the id and "." for the class
one_half is class not a id , so you should use
.one_half
also for phone and email you should use
.phone .email
Arnav Joy comments:
one more thing , if you want to later the css for only header then you should not modify directly .one_half , since it will modify its css and if you use it any where else then it will take that new css .
So if you want to change the css for only header part then you should use following
.colwrapper .one_half{
width: 44%;
margin-right:3%;
}
Ciaran Whelan comments:
Thank you Arnav, that worked perfect. I edited it slightly to make it relevant for #container-36
#container-36 .colwrapper .one_half{
width: 44%;
margin-right:3%;
}
Do I need to have the .colwrapper in that line?
Arnav Joy comments:
no you do not need to include that...
Ciaran Whelan comments:
Perfect Thank you...
Hai Bui answers:
Try this
.one_half .phone, .one_half .email {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}
Hai Bui comments:
Well.... it may not work because the container width/layout is not correct
Ciaran Whelan comments:
Thank you Hai, I tried your solution, but unfortunately it did not work. Arnav has solved this for me.