In my article header section, I'm having a few alignment issues. I did a screen shot, but here is the live page:
http://www.picturemeclubbing.com/newyear/index.php/2014-01-21-01-37-46/item/19-phil-cashout-interview
Pic here:
I chose to inspect the area I wished to move and found:
span.itemAuthorDetailss
position: relative;
text-indent: 4px;
bottom: 20px;
Changing bottom: 20px to a lower number brought the text down. At least in the code inspector window. But when I made the changes in the css file, the page when haywire. On top of that, the image next to the text would not move down independently. I'm new to this coding stuff. Any help would be greatly appreciated.
span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Does that work? Maybe add some margin to:
.authorDetails {
float: left;
margin-right: 12px;
margin-top: 5px;
}
Another alternative is your PMD image seems a little high - so try this:
.authorDetails img {
margin-top: 5px;
float: left;
}
.authorDetails span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Put that in your custom.css style sheet:
http://www.picturemeclubbing.com/newyear/templates/yoo_moreno/css/custom.css
Related
So i'm working on a school project (beginner to coding here), and i need to make a div move when you hover over it.
Here is my css code for that div:
#div2
{
box-shadow: 4px 4px 10px;
width: 80%;
height: 220px;
font-size: 15px;
margin-left: 5%;
margin-bottom: 3%;
text-align: center;
margin: auto;
background-color: #99CC00;
a:hover
{
float: right;
}
}
I need to make the whole box move to the right when you hover over it.
If anyone could help me that would be awesome!
If you are looking to move the whole div, you can make a new div id with a hover on it. Not just links have the ability to hover.
Example:
#div2:hover {
float: right;
}
Although, having a float on a hover will have it be very strange on the page. You can add padding-right to make it move just a little.
Your hover is currently just for a elements. If you want the div to do something, you'd have to add a new section with #div2: hover
remove
a:hover
{
float: right;
}
and insert
#div2:hover
{
float: right;
}
Recently took over a site from a new client. Trying to make two div's in the header. Left is the logo. Fine, no problem there. But the right div has two elements and they should both be on the right hand side of that div. Tried floating right and changing margins, padding, etc. Not much working. Big issue is the order should be social icons and then MailChimp widget and instead, it's in reverse. Here's what I'm currently using for my CSS for that area:
#theme-logo {
width: 50%;
float: left;
margin: 0;
}
#theme-header {
min-height: 60px;
}
#theme-header .tabcontent ul li.widget {
position: relative;
float: right!important;
padding: 0px 20px;
}
#theme-header .tabcontent {
position: relative;
float: left;
top:0px;
width: 50%;
}
#theme-header .tabcontent ul {
float: left;
list-style: outside none none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
Found it. The original theme had absolute positioning on the MailChimp widget's div. Like this:
#mc_signup { position: absolute; right: 0px; width: 226px; }
So I just deleted that line from the theme's CSS and problem seems to have been solved.
Never fun to take over a theme from someone else.
I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.
This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.
The affected page can be found here.
I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper
.wrapper {
width: 800px;
margin: 0 auto;
position: relative;
}
and position:absolute to the searchbox will prevent any jumping.
header#top #searchBox {
position:absolute;
top: 0;
right: 0;
display: block;
width: 240px;
height: 45px;
// line-height, any other styles
}
Try the following
header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;
text-align: right;}
The solution is quite simple,
just ad float: left; to the menu element ( header#top nav ul)
header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}
than you will only need to add height to the wrapper
.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}
I have some issues with the text inside two of my buttons located inside a block_head class div.
In Chrome, they show exactly as I want :
In IE9, there is no text :
Here's my CSS code :
.block .block_head button {
margin: 13px;
padding: 5px 15px;
float: right;
height: 30px;
text-align: center;
}
I tried playing with the CSS attributes (vertical-align, remove margin, etc.), and the best I could come up with is by removing the padding line :
I sense a stupid mistake or compatibility problem, as I am kind of new to web programming.
Any help would be much appreciated!
Without seeing your code, all I can imagine is that there is a style being applied that is setting the line height. Can you try adding this to your ".block .block_head button" style?
line-height: 1em;
padding: 0px;
Try this:
.block {
float: right;
}
.block .block_head button {
margin-right: 13px;
padding: 2px 15px;
// float: right; (button is an inline element)
// height: 30px; (auto height)
// text-align: center; (no fixed width, the text will always be in the center)
}
I need to place help text below labels and finding it tricky getting the CSS correct for it.
I have created the jsfiddle below as an example.
The requirements are:
The label is left aligned
The help text is shown directly below it
The input and select controls appear on the same line
http://jsfiddle.net/brendan_rice/paSR2/2/
Can anyone help please?
Please check,
http://jsfiddle.net/paSR2/4/
Changes
label {
display: block;
font-size: .9em;
float: left;
clear: left;
width: 52px; <----- /*changed*/
margin: 0px;
padding: 0px
}
Without hard coded width
label {
display: block;
font-size: .9em;
float: left;
clear: left;
margin: 0px;
padding-right: 5px;
}
Slightly rejigged your code and css, see here:
http://jsfiddle.net/paSR2/9/
I Made some modifications to your design:
http://jsfiddle.net/paSR2/13/
Is this what you are after?