I am looking to fill the browser window with a single character across the browser window.
The closest answer to a similar question is contained in this jsfiddle:
CSS:
.line{
border-bottom:1px dotted black;
position:relative;
height:16px;
}
.line span{
display:inline-block;
position:relative;
background:white;
bottom:-2px;
height:100%;
padding:0 5px;
}
.line .price{
position:absolute;
right:0;
}
HTML:
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
How would I swap the dotted line for a character (m)?
To remove the dotted line you would just have to remove the code in the CSS
line{
border-bottom:1px dotted black; <--remove this part of the code
position:relative;
height:16px;
}
If you want to have a single char as background of the whole page just create an image with the char on it the size depends how big/small do you want it to look like.
Then with the image m.jpg
Do
Css
html{
background-image: url("path/to/m.jpg");
background-repeat: repeat;
}
Related
This is question not more specific. I want to so common, because most of the web developers have this problem.
We all know the camera view which has border in 4 corners but not in the right/left/bottom/top.
How can we make this effect using css?
html
<div id="div1" />
<div id="div2" />
css
#div1 {
position:absolute;
top:9px;
left:9px;
height:100px;
width:100px;
background-color:white;
border:1px solid black;
}
#div2 {
position:relative;
top:-1px;
left:-1px;
height:102px;
width:102px;
background-color:white;
border-radius: 15px;
}
I achieved it like this.Now I want to know how can achieve this using only one div
You should use parent->child logic
For example :
<div class="parent"><div class="child"></div></div>
EXAMPLE :
Codepen
i have a ribbon on bottom of every report page with an image for call window.print().
i figure out it like this:
<div id="dgdPrint" class="hop">
<div id="dgdPrnImg" title="Print Report..." onclick="window.print();">
</div>
</div>
and i style it with:
#dgdPrint
{ position:fixed;
border-top:1px solid #000;
width:100%;
bottom:0;
right:0;
text-align:center;
height:55px;
margin-top:50px;
background-color:#88A7DB; }
#dgdPrnImg
{ margin-top:10px;
background-image:url('PrinterText.png');
background-position:center center;
background-repeat:no-repeat;
height:35px; }
#dgdPrnImg:hover
{ background-image:url('PrinterText-hover.png'); }
but whole of first div (ribbon) take this effect and on hover of any part of that the image is changed. what's wrong in my code?
It changes because you have background-image:url('PrinterText-hover.png'); } set under #dgdPrnImg:hover
Here is the html code
<div>
<div class="fractop"><span>11</span></div>
<div class="fracbottom">2</div>
</div>
<div>
<div class="fractop"><span>5</span></div>
<div class="fracbottom">2</div>
</div>
Here is the css code
<style>
.fractop{
border-bottom:solid black 0px;
display:inline-block;
float:left;
margin-top:20px;
text-align:center;
width:100%;
}
.fracbottom{
display:inline-block;
clear:left;
float:left;
width:100%;
text-align:center;
}
.fractop span{
border-bottom:solid black 3px;
}
</style>
I need to make the "divide by" line for fractions stay fixed for 2 digits. It need not become longer or shorter dynamically.
change your .fractop span to this
.fractop span{
border-bottom:solid black 3px;
width: 17px;
display: inline-block;
}
while your approach isn't the best and you're over complicating things, to give you an answer within that approach, change your CSS to this:
.fractop{border-bottom:solid black 0px; display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;border-bottom:solid black 3px;}
.fracbottom{ display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;}
see fiddle here and change it at will
Here,
I have a working demo in this fiddle - put an HR between your two numbers, then style it as a line - does as you prescribe. I also added some inline styling to the parent div to help. You can easily move that to it's own css class though.
http://jsfiddle.net/rrp46faj/2/
<div style="width:20px !important;"><div class="fractop"><span>11</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
<div style="width:20px;"><div class="fractop"><span>5</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
You can use this ⁄
Example : <div class="fractop">4.0000 ⁄ 5.3456</div>
You can find more details here http://webdesign.about.com/od/localization/l/blhtmlcodes-math.htm
You can also see MathJax
I've been using the new CSS border-radius function for a while now, but I'm stumped today! I have a background image (120px x 60px) and have set a border radius of 5px, but it's only rounding the top two corners?!
The CSS code I'm using is here:
#buttonRow {
position:relative;
width:980px;
height:60px;
margin-left:51px;
margin-bottom:25px;
float:left;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
And the output is this:
Why is it only showing the top corners as rounded?!
Any help would be greatly appreciated!
Thanks, Zulu
EDIT
Here is the HTML for those asking:
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
It might be that your image isn't long enough and thus you don't see the rounded corners on the bottom. I ran into that today, actually.
I simply set a background color and it showed me what the issue was. So, just modify your CSS to:
background-image: #00ff00 url('../assets/buttons/generic_button.png');
or:
background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');
That will at least tell you if your image covers the whole area or not and you will know what to do from there.
In CSS3 it's done like this:
border-top-right-radius: 8px;
border-top-left-radius: 8px
Most likely the bottoms are getting cut off from overflow. Make sure the containing element is tall enough to accomodate the heights of these or set the all the ancestor's overflow to overflow: visible.
Also, use jsfiddle.net to post live examples instead of just the CSS in a vacuum. CSS requires context.
As previously answered, your image isn't large enough. Your div is 120x60px to match your image, but you have a padding-top of 10px, which extends the size of the div to 120x70px total--too large to show the rounding. Either change the size of your background image or resize the div to 50px tall--with padding, it'll end up at the proper size.
You can use this code
#buttonRow {
width: 1170px;
margin: 0 auto;
display: block;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
Try using margin-top instead of padding top, I've had this issue recently and that seemed to fix it.
I am having problems with my sidebar_box, as it is displaying a unwanted white space at the bottom of my images.
The thing is that this seems to happen only when I place an image inside (this doesn't happen with text or ul lists)
You can see this jsFiddle
My HTML structure:
<div id="sidebar">
<div class="sidebar_box">
<div class="sidebar_header">Advertisement</div>
<img src="./images/square_add.png" width="180" height="150" />
</div>
</div>
The relevant CSS to reproduce:
*{
padding:0;
margin:0;
}
img{
border:0;
}
#sidebar .sidebar_box{
width:180px;
background:#fff;
border:1px solid #000;
}
#sidebar .sidebar_header{
width:180px;
background:#ddd;
border-bottom:1px solid #000;
}
I am clueless and I have already tried everything of my knowledge.
Add vertical-align: bottom to your image. This happens because images are displayed inline, meaning they have to leave space below in case of q, p or other letters that drop below the baseline.
write this:
img{
border:0;
vertical-align:top;
}
Check this http://jsfiddle.net/sKE6y/1/