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;
}
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
Look at the picture, I don't know what the real problem is.
The search bar with the button and the box which have the text "PROFILE" give me a problem
.profile{
width: 300px;
height: 300px;
background-color: white;
border: 1px solid lightgrey;
border-radius: 5px;
position: absolute;
right: 50px;
top: 80px;
}
.srch{
width: 500px;
height: 30px;
border-radius: 2px;
border: 1px solid white;
margin-left: 150px;
padding-left: 8px;
}
.sub{
background: none;
border: 2px solid red;
border-radius: 2px;
color:white;
font-weight: bold;
font-size: 14px;
width: 100px;
height: 35px;
}
Use:
vertical-align: top;
For the text
Considerind CSS is used in HTML, why don't you try to use Bootstrap? It's really usefull, it can resize and re-position your element properly when resizing the window. And it does it responsevely. You can use its classes (like ) to do that.
Here, watch the layout grid documentation, it should work for your problem
https://getbootstrap.com/docs/4.3/layout/grid/
I did't exactly get you,
the code below hold the search bar with seacrch button.
if you want to place the search bar at above the profile column.make sure its inside the column.and remove the position:absolute; property and its right:; and top:; also.
use float:right;
.srch{
position:relative;
}
.sub{
position:absolute;
top:0;
right:0;
}
have any questions,please don't hesitate to ask.
I have the following code:
<td>
<div>
<span class ="name">Can be long, can be short</span>
<button>Test</button>
</div>
</td>
td{
white-space: no-wrap;
width:175px;
position: relative
}
button{
position:absolute;
right: 15px;
bottom: 5px;
}
What I get is
I want to show name in one line (even if it is outside the cell), but button should be always in cell (on the same line).
If name is short then it should be right after the name, if not then stick to the right of cell.
I used absolute positioning, but in this case button always sticks to the right of the cell. Not what I need for short names.
So, picture for long name is what I need, but for short name I want yellow button to show near name, not stick to the right side.
Working jsfiddle: https://jsfiddle.net/8kchkucv/
Is it possible to do this with CSS?
Andrew what you are asking is not possible with having only one css for both the buttons, either you can have something like this jsfiddle
https://jsfiddle.net/rohts76/8kchkucv/1
.but
{
cursor: pointer;
padding: 2px 5px;
margin: 5px 0px 0px 5px;
border-radius: 5px;
font-family: 'Pacifico', cursive;
font-size: 10px;
color: #FFF;
text-decoration: none;
background-color: #F2CF66;
border-bottom: 1px solid #D1B358;
text-shadow: 0px -2px #D1B358;
position:absolute;
//right: 15px;
bottom: 5px;
}
.cell{
white-space: nowrap;
width:175px;
position:relative;
}
.cell div{
margin: 0;
padding: .35em;
float: left;
width: 100%;
height: 100%;
}
tr{
background-color: #8db4e3;
background-size: 100% 100%;
}
This code will give you correct thing..
I'm trying to get a border to surround the entire body of my page, but when I add the border property it only goes about halfway down the page, stopping about 20px under the content. The messenger isn't allowing me to post the html without adding extensive comments. This is the CSS. Thank you.
body {
border: green dotted 2px;
}
h2 {
font-size: 2em;
font-style: italic;
text-align: center;
border: 2px outset green;
border-radius: 25px 10px 25px 10px;
padding: 5px;
width: 350px;
margin: 0 auto;
margin-top: 50px;
}
p {
color: black;
text-align: center;
background-color:
}
img {
width: 95px;
}
#treelink {
width: 120px;
border: outset green 2px;
padding: 5px;
box-shadow: 5px 5px 4px green;
}
I just tested it out on jsfiddle, and I believe that you have to add this.
html, body {
width: 100%;
height: 100%;
}
I'm guessing it's because the body is dynamically sized depending on what's inside it, unless you specify in the css. Same with the html; you need to specify the hmtl as width: 100% and height: 100% so the html itself is as large as the entire page.
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;
}