I've this style for my titles on my website:
.heading-text>* {
position: relative;
}
.heading-text h4 {
font-size: 34px;
margin-bottom: 30px;
letter-spacing: -.7px;
line-height: 40px;
}
.heading-text.heading-line h4:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
bottom: 5px;
background-color: #fcf8e3;
z-index: -1
}
<div class="heading-text heading-line">
<h4>
My super loooong title
</h4>
</div>
<div class="heading-text heading-line">
<h4>
My short title
</h4>
</div>
The issue I'm facing is the yellow bar is not fitting the text width.
Is there a way it can be adjust automatically ?
Thanks.
You could make the h4 not take the whole screen, by using display:inline-block;
.heading-text>* {
position: relative;
display:inline-block;
}
Try this:
.heading-text>* {
position: relative;
}
.short-text {
display: inline-block;
}
.heading-text h4 {
font-size: 34px;
margin-bottom: 30px;
letter-spacing: -.7px;
line-height: 40px;
}
.heading-text.heading-line h4:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
bottom: 5px;
background-color: #fcf8e3;
z-index: -1
}
<div class="heading-text heading-line">
<h4>
My super loooong title
</h4>
</div>
<div class="heading-text heading-line">
<h4 class="short-text">
My short title
</h4>
</div>
Related
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: 1;
left: 80%;
/* top: 0%; */
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{background: #1a1aff;}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
How to do same effect like main(1st link) for responsive width??
As you can see on example, 1st hover look nice but 2nd one not rly... any clue?
Because when i check for bigger or smaller screen my circle move some where.
Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:
a {
color: white;
padding: 5px;
border-radius: 0 1rem 1rem 0 ;
background-color: blue;
}
Some Page
<br/>
<br/>
Some Page 2
Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.
As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{
background: #1a1aff;
}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.
a{
width:20%;
display: block;
height: 30px;
position:relative;
}
a:hover{
background: #1a1aff;
color:white;
}
a:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
a:hover:after{
background: #1a1aff;
}
<div id="main">
<span>HOOVER LINK BELOW</span>
some page
<a style="width: 50%" href="">some page 2</a>
</div>
Just add the display property to your .addcircle div:
.addcircle{
width:15%;
height:30px;
position:relative;
display: flex;
}
and for .addcircle:after change right position instead of left:
.addcircle:after{
position: absolute;
z-index: 1;
right: -12px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
My question is actually more complex then the title, but I couldn't come up with a better one.
Initial Setup:
I use Bootstrap v4.0.0-alpha.2 and I ripped out this simple sidebar. I'm not sure why and if it's relevant but I also set flex: true in my _library-variable-overrides.scss (I use css-burrito) but since I only set it to try it out, I'm probably okay with turning it off. ;-)
What I want to do:
I would like to have a button in the sidebar that is bottom aligned. Ideally it's centered horizontally in the sidebar and has about 1em margin to the bottom.
What my code looks like:
_shell.scss & _sidenav.scss:
#shell-wrapper {
padding-left: 0;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
padding-left: 250px;
#shell-content-wrapper {
position: absolute;
margin-right: -250px;
}
}
#media(min-width:768px) {
#shell-wrapper {
padding-left: 250px;
}
#shell-wrapper.toggled {
padding-left: 0;
#shell-content-wrapper {
position: relative;
margin-right: 0;
}
}
#shell-content-wrapper {
padding: 20px;
position: relative;
}
}
#sidenav-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
#sidenav-wrapper {
width: 250px;
}
}
#shell-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
/* Sidenav Styles */
.sidenav-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
li {
text-indent: 20px;
line-height: 40px;
a {
display: block;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
a:active, a:focus {
text-decoration: none;
}
}
>.sidenav-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
a {
color: #999999;
}
a:hover {
color: #fff;
background: none;
}
}
}
#media(min-width:768px) {
#sidenav-wrapper {
width: 250px;
}
#shell-wrapper.toggled #sidenav-wrapper {
width: 0;
}
}
and index.html:
<div id="shell-wrapper" class="toggled">
<div id="sidenav-wrapper">
<ul class="sidenav-nav">
<li class="sidenav-brand">
Brand
</li>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li id="logout">
<button class="btn btn-danger-outline">Logout</button>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button">
☰
</button>
<div id="shell-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Main Content Here-->
</div>
</div>
</div>
</div>
</div>
The logout button is one in question. I just tried doing it as a <li> of the sidenav-nav but I'm not tied to this setup.
What I have tried so far:
a lot!
What came closest to what I want was adding this:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
It's pretty close to my goal on a desktop browser, but hitting that show me this on a phone button in chrome, the logout button is just gone.
i haven't worked with css-buritto, but you could look into giving the button a class or id and passing the position:relative argument you can then set a bottom: 1em and that should position the button at the bottom. alternativly you can also look into the other position elements like fixed that could also do the trick
like you mentioned a the end
#logout {
position: relative;
bottom: 1em;
}
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
I've created a counter with 4 digits, which need to be displayed in the bottom right corner of the page. Each digit has a block-image as 'background'.
It works in chrome, but not in IE7+ and FF..
HTML (I writed down only 1 digit, but there are 4):
<div id="container_bottom">
<div id="counters" <div id="counter_txt">Text:</div>
<div class="div_counter1">
<div class="div_counter2">
<img class="img-counter" src="counter_bg.png" />
</div>
<div class="div_counter3">
<span class="counter"><?php echo $counter[1]; ?></span>
</div>
</div>
</div>
CSS:
#container_bottom {
width: 100%;
min-width: 800px;
display: inline-block;
position: absolute;
margin-top: 150px;
_width: 800px;
}
#counters {
float: right;
margin-right: 5px;
}
.div_counter1 {
display: inline-block;
}
.div_counter2 {
display: inline-block;
}
.div_counter3 {
display: inline-block;
position: absolute;
margin-left: 8px;
top: 0px;
}
.counter {
font-size: 36px;
color: #ffffff;
}
#counter_txt {
font: 16px Segoe Print;
color: #0c3348;
display: inline-block;
position: absolute;
right: 180px;
top:10px;
}
It looks like you might have overcomplicated what you are trying to do seems to be something like this
HTML
<div id="container_bottom">
<span class="counter_text">Text here:</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">6</span>
</div>
CSS
#container_bottom{
position:absolute;
bottom:20px;
right:20px;
}
#container_bottom .counter_holder{
display:inline-block;
background-color:green;
width:30px;
height:35px;
text-align:center;
font-size:30px;
border:1px solid black;
-moz-border-radius: 5px;
border-radius: 5px;
/* background-image: url(''); // add image here if needed*/
}
#container_bottom .counter_text{
/* add css here if needed */
}
jsFiddle Here
There is div container and 2 divs inside. It should be image(first div) and text near it with chosen distance between them.
alt text http://img24.imageshack.us/img24/1160/2delcontact.png
The code below works fine in Firefox/Chrome/Safari, but it works incorrect in IE7/Opera.
alt text http://img710.imageshack.us/img710/5675/2delcontactie7opera.png
xhtml:
<div id="mainContact">
<div id="contactIcon">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
</div>
<div id="contactField">
<span id="topMailAddress">07897 255 664</span>
</div>
</div>
css:
html, body{ font-family: Tahoma; }
img{ border: 0px; }
#mainContact{
width: 135px;
float: right;
overflow: hidden;
font-family: Trebuchet MS;
}
#contactIcon{
width: 19px;
margin-right: 7px;
float: left;
text-align: right;
}
#phoneImg{
position: relative;
bottom: 14px;
}
#contactField{
float: right;
width: 109px;
text-align: right;
font-size: 1.12em;
color: #454545;
}
#topMailAddress{
position: relative;
width: 109px;
top: 13px;
}
here is this example on server: link text
What can be the reason of this problem?
Try this
HTML
<div id="mainContact">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
<span id="topMailAddress">07897 255 664</span>
</div>
<br class="clear" />
CSS
#mainContact {
width: 200px; // Width of whole element - adjust to always fit number
}
#mainContact #phoneImg,
#mainContact #topMailAddress {
display: block;
float: left;
}
#mainContact #phoneImg {
margin-right: 10px; // Adjust gap between image and text
}
br.clear {
clear: both;
height: 1px;
overflow:hidden;
font-size: 1px; // For IE and the like
}
Have fun ;)