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
Related
my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }
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'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'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.