How can i hide border behind MON and give some space like in this pic
https://www.screencast.com/t/SJmg63NZuF
div {
height: 100px;
width: 100px;
border: 2px solid black;
}
h2 {
width: 50px;
margin-top: -15px;
margin-left: 0px;
padding: 0 10px;
}
<div>
<h2>MON</h2>
<p>7am - yeah</p>
</div>
I think you're trying to achieve this. The convention of using <legend> tags which is a child of <fieldset> is usually applied and used for forms but you can achieve the same as shown below. I tweaked the code a bit and added a background to show you how you may achieve what you're looking for as the screenshot you posted.
Hope, it helps.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/21522739/thumb/1.jpg");
}
fieldset {
width: 100px;
border: 2px solid white;
text-align: center;
}
h2 {
color: white;
}
p {
color: white;
}
<fieldset>
<legend align="center">
<h2>MON</h2>
</legend>
<p>7am - yeah</p>
<p>8am - yeah</p>
<p>9am - yeah</p>
</fieldset>
Looks like you just need to set the background color from transparent.
div {
height: 100px;
width: 100px;
border: 2px solid black;
background: white;
}
h2 {
width: 50px;
margin-top: -15px;
margin-left: 8px;
padding: 0 14px 0 10px;
background: white;
}
<div>
<h2>MON</h2>
<p>7am - yeah</p>
</div>
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 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 have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs
I need your help.
I can't seem to be able to get the hover working properly over a wrapper/container DIV
CSS:
#myhover:hover {
border: 1px solid red;
}
HTML:
<div id="myhover" style="background: #ffffff;
width: 177px; height: 20px; border: 1px solid #808080;">
<div style="float: left;">
<input id="refdocs" style="padding-left: 4px; padding-right: 3px;
height: 15px; width: 158px; border: none;" type="text">
</div>
<div style="line-height:18px; font-size: 11pt; color: #779297;">+</div>
</div>
Because inline styles are the most specific in the cascade, they can over-ride things you didn't intend them to. Move your #myhover styles into a style sheet then it should work fine.
for example:
#myhover {
background: #ffffff;
width: 177px;
height: 20px;
border: 1px solid #808080;
}
jsfiddle: http://jsfiddle.net/va8Bz/
Your style attribute is overriding your stylesheet selectors. It's more specific.
You have three options here:
Move your styles out of the style attribute.
Move your styles out of the style attribute.
Add !important to the style declarations that should override the ones in your style attribute.
I suggest you move your styles out of the style attribute into a stylesheet.
Example: http://jsfiddle.net/Y7NW9/
You need to stick all your CSS in a stylesheet instead of using inline styles.
What you're trying to accomplish can be done with less markup too:
<div class="container">
<input class="refdocs" type="text">
<div class="icon">+</div>
</div>
Then in your CSS stylesheet:
.container {
display: inline-block;
position: relative;
}
.input-wrapper {
float: left;
}
.refdocs {
border: 1px solid #808080;
padding: 2px;
padding-right: 14px;
margin: 0;
}
.refdocs:hover {
border: 1px solid red;
}
.icon {
font-size: 11pt;
position: absolute;
top: 3px;
right: 5px;
}
Here's a working demo
I solved this for you in your previous question:
#add {
float: right;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
}
#add:hover {
color: #f00;
}
http://jsfiddle.net/kUSBM/
Please respond to the questions or accept answers.
Here you can see the problem: http://jsfiddle.net/kAQrX/1/
I want the magnifier, search text and search box (input) to display in one line, and in a middle of the #search div.
I'm out of ideas now.
Use the css background-image property and a left padding, instead of an image tag! :)
E.g.
.search_content {
background: url('http://www.iconeasy.com/icon/thumbnails/System/WebGloss%203D/Magnifier%20Icon.jpg') no-repeat;
padding-left: 55px;
}
JSFiddle
Try This :
.magnifier {
width: 35px;
height: 35px;
margin: 3px;
float:left; //<----
}
See Feedle http://jsfiddle.net/kAQrX/2/
You can display it inline, or as inline-block. See this fiddle
there you go:
HTML:
<div id="search">
<div class="search_content">
<span class="search_text">SEARCH:</span>
<input type="text" name="query" class="search_box">
<img src="http://www.iconeasy.com/icon/thumbnails/System/WebGloss%203D/Magnifier%20Icon.jpg" class="magnifier">
</div>
</div>
CSS:
#search {
background: url("images/search.png") no-repeat;
width: 382px;
height: 41px;
margin-right: 10px;
float: right;
}
.magnifier {
width: 35px;
height: 35px;
margin: 3px;
vertical-align:middle;
}
.search_text {
margin-left: 3px;
text-shadow: 0px 0 black, 0 1px black, 1px 0 black, 0 1px black;
color: #FFF;
font-weight: bold;
}
.search_box {
width: 162px;
height: 33px;
padding: 0px 12px 2px 10px;
}
.searchbox_content {
margin-top: 10px;
}
You can add the following:
.searchbox_content {
display: inline;
}
to get the 3 elements in one line.
To get them into the center of #search you can add the text-align-Attribute:
#search {
text-align:center;
}