I want to create a set of 3 circle buttons vertically aligned (see reference: http://i.imgbox.com/hAjYNmIq.jpg) but I can't get it done for some reason, the first button seems to cover the rest. I know this is a basic code thing but I'm stuck and I need to get this solved asap.
Here's a basic code for what I've got so far:
#pagination a {
color: {color:Link Shadow};
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
position: fixed;
float:left;
z-index: 999!important;
bottom: 28px;
display: none;
background-color: #fff;
border:3px solid {color:Link Shadow};
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
margin-left: -245px; }
<div id="pagination"> Back To Top<br> Prev Page<br> Next Page </div>
After updating your HTML (incorrect href's), here's what I've come up with. Your text will be overflowing because of your size constraints, though.
And here's a Fiddle of it
<div id="pagination">
Back To Top
Prev Page
Next Page
</div>
#pagination a {
color: #000;
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
z-index: 999!important;
background-color: #fff;
border:3px solid #00a;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
display:block;
margin-bottom:20px;
}
#pagination {
position:fixed;
}
Related
When I try to create a h1 element with padding and set it as an inline then follow up with a screen wide line using h1:after it ends up with the padding of the h1 element on a new line, how can I get the paddin of the h1 element to be before the horizontal line?
The css code is as follows.
h1 {
font-size: 15px;
background: #ccc;
display: inline;
padding: 8px 0px 5px 10px;
}
.headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
h1:after {
content:' ';
display:block;
border:4px solid #ccc;
border-radius:1px;
-webkit-border-radius:1px;
-moz-border-radius:1px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
And the html code is simply a span with class headline inside a h1 element.
It currently looks like this:
And I want it to look pretty much the same except that the padding that gets put below the line at the end of the text.
You're overthinking the issue.
Leave the h1 as a block level item and move the styles around to the span.
h1 {
font-size: 15px;
}
.headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
background: #ccc;
padding: 8px 10px 3px 10px;
}
h1 {
border-bottom: 4px solid #ccc;
}
<h1><span class="headline">Headline</span></h1>
Try
h1 display:-webkit-inline-box; or inline-flex;
I add a blog sign up form to the sidebar of our blog page and styled it with CSS. It looks fine on desktop view, but when you open the page on a mobile phone then the button overlaps the bottom of the page;
https://screentimelabs.com/parenting-hacks/
enter image description here
Here's the code that I added to the style sheet;
.sidebar-widget #mc_embed_signup{
width: 278px;
height: 211px;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png);
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}
.sidebar-widget #mc_embed_signup h2{
color: #ffffff;
font-family: "Sans Pro Regular", sans-serif;
font-size: 26px;
margin: 4px 0;
}
.sidebar-widget #mc_embed_signup .mc-field-group{
font-family: "Sans Pro Regular", sans-serif;
color: #ffffff;
}
.sidebar-widget #mc_embed_signup .mc-field-group{
font-family: "Sans Pro Regular", sans-serif;
color: #ffffff;
}
.sidebar-widget #mc_embed_signup input.button{
color: #FFFFFF;
border: 2px solid #FFFFFF;
background-color: #ffc23b;
text-transform: uppercase;
margin
}
Any help would be hugely appreciated, spent hours on this now.
You have to change this class like this,
.sidebar-widget #mc_embed_signup {
width: 278px;
height: auto;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png) no-repeat;
background-size: cover;
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}
I don't want the large box to move when the buttons at the top move. The box will contain text, but on the hover of the buttons, the box moves. Any way to fix this? Code I use below:
<html>
<title>Website</title>
<head>
<style>
body {
background: url(bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.button {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
padding:35px 32px;
background: url("pic.png");
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
}
.button:hover {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
padding:68px 32px;
font-family: "Comic Sans MS", cursive, sans-serif;
border:none;
display: block;
}
.b-pos {
margin-top:50px;
margin-left:34%;
}
.box {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
margin-left: 80px;
margin-top: 190px;
width: 1000px;
height: 500px;
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, -8px 0 8px -6px black, inset 0px 0px 10px 0px #000000;
}
</style>
</head>
<body>
<div class="b-pos">
Home
Sales
About
</div>
<div class="box">
</div>
</body>
</html>
All the code that is needed is above. I don't think the background is needed.
You need to take either the buttons or the box out of the normal flow of HTML. You can do this by setting the CSS position attribute of, for example .box to absolute or fixed.
.box {
position: absolute;
}
This will "lock" the box in place.
Just add: position:fixed;
in the box css and it will not move.
The fixed attribute means that the element is positioned relative to the browser window. Hence it will stay where it is irrespective of the above movement when the button is hovered upon.
Also you can use position:absolute here. Absolute means the element is positioned relative to its first positioned (not static) ancestor element.
My code: https://jsfiddle.net/k0hqzcwg/
I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.
In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm
Any tips are welcome, I know I have a lot to learn.
For those who dont want to click the link:
Html:
<body>
<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>
</body>
Css:
body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}
#headingbarholder{
position:fixed;
left:0;
width: 100%;
}
#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}
#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}
#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}
Float the button left.
Here:
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}
I would use a button instead and float it: Fiddle
For some reason my google web font in the navigation menu keeps on changing its weight from page to page although I have set it to 700. The CSS for the menu is identical on each page. Could somebody please tell me whats going on as I have never found this before.
For future posterity reasons I shall delete the live link as soon as somebody answers. Thanks!
My CSS is
* {
font-family: 'Lato', sans-serif;
}
#menu {
font-weight:700;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: -101;
}
Firstly, you need to fix this:
body {
background-color: #FFF;
background-image: url(bg.png);
color: #D6D6D6;
font-family: font-family: 'Lato', sans-serif;
}
Your font-family declaration is duplicated.
Secondly, your 700 is being overridden by the #menu li a class here:
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: lighter; /*should be changed to 700*/
white-space: nowrap;
color: #333;
}