I'm working on a page located here: http://www.fusionhost.co.uk/newsite2/
I'm trying to get the right sidebar that contains "UK Servers, Money Back etc" to move up so it is directly below the client reviews box. Using firebug I see that nothing is in the way and it should be moving up without a problem, but it isn't.
It seems to move up and down with the height of the Fuse with us box, despite that box's height not covering the portion above it.
You have the welcome and testimonials divs, which are block elements.
if you move the rpanel immediately after testimonials and float it right, the panel will move up.
Try swapping this style in your css:
Replace this:
.rpanel .box {
border: 1px solid #E9E9E9;
color: #AEAEAE;
float: left;
font-family: tahoma;
font-size: 11px;
margin-bottom: 20px;
padding: 15px;
width: 178px;
}
With this:
.rpanel .box {
border: 1px solid #E9E9E9;
color: #AEAEAE;
float: left;
font-family: tahoma;
font-size: 11px;
margin-bottom: 20px;
padding: 15px;
position: relative; /* ADDED */
top: -120px; /* ADDED */
width: 178px;
}
Related
I'm trying to make a simple button. But instead of <button>, I'm using <div> and <p>, but the result will show up as only border, and the text won't show up over the border.
Am I doing something wrong?
Screenshot of the button:
.Something4 {
margin-top: -72px;
margin-left: 335px;
font-size: 20px;
width: 110px;
height: 60px;
border: 1px solid #E12976;
border-radius: 20px;
}
.Something4 p2 {
margin-left: 335px;
width: 100px;
height: 50px;
}
<div onclick="location.href='Login.php';" style="cursor: pointer;" class="Something4">
<p2 style="font-family: Sans-serif;font-size:16px;font-style:normal;">Login</p2>
</div>
I copied your code into codepen.com.
margin-top: -72px; is moving your button off the screen.
The second margin-left: 335px; in the p2 section is moving the text out of your button.
Try removing all your margins and see how it looks:
.Something4 {
font-size: 20px;
width: 110px;
height: 60px;
border: 1px solid #E12976;
border-radius: 20px;
}
.Something4 p2 {
width: 100px;
height: 50px;
}
Keep in mind the margin inside the p2 tag will not replace the margin on the border itself, and having negative margins might not always do what you think.
I would highly recommend using semantic markup to describe the content of your page. This helps make your content accessible and work as expected across a variety of devices and use cases that you might not be capturing.
So use an anchor tag <a> to link to \login.php, and then you can choose to style that similar to a button if you'd like.
body {
padding: 15px;
background: #211f1f;
}
a.login-button {
color: salmon;
border: 1px solid salmon;
padding: 10px 15px;
border-radius: 20px;
text-decoration: none;
}
Login
I'm having trouble keeping a custom link in my content area. I have this HTML
#createBtn {
margin-bottom: 20px;
width: 100%;
padding: 15px;
border-radius: 5px;
border: 1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
text-decoration: none;
font-size: 15px;
cursor: pointer;
white-space: nowrap;
}
<div id="userNotificationsWrapper">
<p>You have no notifications.</p>
<div><a id="createBtn" data-method="get" href="/user_notifications/new">Create Notification</a></div>
</div>
but the link/button keeps going over the bottom boundary of my content area (the DIV with id="userNotificationsWrapper"). I want the content area to capture the link/button entirely and I would like it to line up on the next line after my message.
I created a Fiddle to demonstrate my problem -- https://jsfiddle.net/b3hxko01/ .
You have two problems. First is width: calc(100% - 750px); on #userNotificationsWrapper. You probably want to replace it with a max-width: 220px or similar...?
And the second one is width: 100%; on #createBtn. I'd replace it with:
#createBtn {
display: inline-block;
box-sizing: border-box;
margin-right: 10px;
width: calc(100% - 20px);
}
Your updated fiddle. My CSS is added at the end. Haven't touched yours. Feel free to search each of the props and see what they do.
Do you want something like this ?
Demo
If not attach a screenshot of it pls .
Here's the css
#userNotificationsWrapper {
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #C7CDD1;
width: 75%;
font-family: Acme;
font-size: 18px;
height:100px;
padding-left: 10px;
}
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I have a basic div with an icon and some text. If I don't try and change the size of the icon it lines up perfect.
But I want the icon to be bigger but still sit centred in the text. The problem is the icon doesn't sit centred in the div, it seems to move up so the text ends up lined to the bottom of the icon and the icon sits higher in the div. I expect the text to be centred in the icon as the icon would be centred in the div....
You can see it on this fiddle;
http://jsfiddle.net/8mjN7/1/
Pulling in
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
CSS
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
}
i {
margin-left: 10px;
font-size: 30px;
}
HTML
<div>
<i class="fa fa-globe"></i>
Foo bar
</div>
The simplest solution is to use the vertical-align property as follows:
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
vertical-align: middle;
}
see demo at: http://jsfiddle.net/audetwebdesign/9ATq8/
Note: It is necessary to specify height: 30px for the i element and line-height: 40px of the parent container, otherwise, any default values may not work as expected.
CSS table-cell also works but the added complexity is not needed in this case.
I use this to make sure the icon is in the middle. The padding & line-height i think are the two most important.
background: rgba(143, 211, 157, 1);
border-radius: 100%;
color: #FFFFFF;
display: inline-block;
font-size: 55px;
height: 45px;
width: 45px;
padding: 40px 45px 40px 35px;
line-height: 45px !important;
transition: .5s;
Did you try to display the div like a table like this?
div {
display:table;
border: 1px solid red;
line-height: 40px;
font-size: 14px;
}
i {
display:table-cell;
text-align:center;
vertical-align:middle;
font-size: 30px;
}
Do you want something like this Link
CSS:
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
display:table;
vertical-align:middle;
width:100%;
}
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
display:table-cell;
vertical-align:middle;
}
I have a couple of links encased in a border with a background... for some reason, the link is NOT clickable on the text, i.e., the cursor does not change to a hand on the link. It is only clickable on the BOTTOM border.... not sure why.
When I change around some of the CSS like the padding/margins/float, sometimes the links aren't even clickable at all. What could possibly be causing this??
THE CODE
<div id="teams">
<ul>
<li>Yankees</li>
<li>Phillies</li></ul>
</div>
CSS
#teams {
position: relative;
top: -10px;
left: -25px;
}
#teams a{
color: #000;
padding: 10px 0px 10px 0px;
}
#teams li {
background: #EEE;
padding: 7px 2px;
text-align: center;
width: 75px;
float: left;
margin: 15px;
font-size: 1.2em;
border: 2px solid #C8C8C8;
border-radius: 5px;
}
SOLVED
There was an invisible element blocking it. Credit to kei.
Right-click on the link and Inspect element. See if there are any transparent elements overlapping the link.