I'm trying to set the margins to a text, however margin-right doesn't seem to work inside message.
Why?
css:
message
{
position: fixed;
display: block;
margin-bottom: 0px;
width: 100%;
height: 40px;
background-color: rgba(26, 119, 212, 100);
line-height: 40px;
font-style: italic;
text-align: left;
overflow: hidden;
}
.messageotext
{
width: 100%;
margin-right: 0px;
}
html:
<message><span class="messageotext">prova</span></message>
I want the text to be out the screen so I can translate it by scripting language from right to left.
You have given width:100% and the parent is fixed so it will not effect
If you remove your width:100% of span you will see margin-right
so you can add text-align:right to parent which will show the effect of margin-right or you can also use float:right
Demo - fiddle
Removed browser default styles by adding
*{
margin:0;
padding:0;
}
* {
margin: 0;
padding: 0;
}
message {
position: fixed;
display: block;
margin-bottom: 0px;
width: 100%;
height: 40px;
background-color: rgba(26, 119, 212, 100);
line-height: 40px;
font-style: italic;
text-align: left;
overflow: hidden;
text-align: right;
}
.messageotext {
/* width: 100%;*/
margin-right: 100px;
}
<message><span class="messageotext">prova</span>
</message>
You can modify your class messageotext with the following code:
.messageotext {
width: 100%;
position: absolute;
left: 100%;
}
Then you can decrease the value of left property to translate it from right to left.
Try using float:right
or you can also use only right:0px if position is absolute
Related
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
}
div.st-header-image p.st-description {
margin: 0px;
color: red;
font-size: 40px;
line-height: 40px;
vertical-align: middle;
}
div.st-header-image ::before {
content: " ";
padding-top: 40%;
display: inline-block;
}
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
I am trying to make a paragraph that needs to be inside div that have ::before style as well so it changes size when I increase or decrease the resolution.
I try using different overflows, different display... Also tried to fix it using calc((100% - 40px) / 2) for positioning top/bottom but it doesn't seem to work either.
div.st-header-image
{
width:100%;
background-color: rgb(167, 184, 133);
margin:0px;
text-align: center;
overflow: hidden;
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
}
::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
p element is inside of div with class st-header-image
Div is responsive but paragraph keeps showing under the div instead in center of it...
What you want to accomplish is to have the div with a responsive space on top and also the paragraph sticking to the middle during it's responsiveness.
I fixed you code without the ::before pseudo element.
This same feature can be attained using a padding for the div and a little positioning.
I shared the code on repl.it here
Here is the CSS you need:
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
padding-top: 40%;
position: relative;
}
p.st-description {
margin: 0px;
color: red;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding-top: 15%;
}
Looking at your code, i assume you are using CSS Preprocessor SASS. With that you need to append "p" element before "::before" selector
**p::before** {
content: " ";
padding-top: 40%;
display: inline-block;
}
or you can include it using ampersand like this
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
&::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
You should use display flex . its allows always center position.
use this code.
HTML
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
css
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
}
div.st-header-image p.st-description {
margin: 0px;
color: red;
font-size: 40px;
line-height: 40px;
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content: center;
-webkit-justify-content: center;
}
div.st-header-image ::before {
content: " ";
padding-top: 40%;
display: inline-block;
}
For some reason instead of only being able to click the links by clicking on the text, you can also click below it on empty space.
My friend said I had to reduce div size but I'm not quite sure on what he meant.
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
#steam,
#youtube {
text-decoration: none;
font-family: cursive;
font-style: oblique;
}
#devil {
border-radius: 120px;
top: 250px;
right: 20px;
}
#steam {
top: 280px;
left: 10px;
}
#youtube {
top: 50px;
left: 115px;
}
a:link,
a:visited {
color: forestgreen;
}
<div>
<img id="devil" src="img/frizzy.jpg">
</div>
<div>
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
Your problem is probably in here:
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
You shouldn't need to set the height or width for your links, since they will be automatically set based on the text. You can use something like firefox tools to look at the bounding block of your links and see what's giving them the big space to click. You can even mess with the parameters here to suit your liking.
In your css, you specify height: 230px; for your element that holds the link. Decrease this size to remove the blank space that also responds to your mouse.
As suggested, use a border or background color to help indicate where your elements are, or use the development console (F12 in Chrome) to find your element sizes.
Instead of setting height to links you should set font-size for them and if this didn’t help set line-height same as font-size value.
You are getting a height on your anchors because you are applying a height to them (you should remove this). Also, I wouldn't use absolute or relative positioning for this as you do not need it. I would envelope your image and your social links in their own containers and position them. Here is an example of what I am talking about.
.container {
margin-top: 20px;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
.social_container {
margin: 0px auto;
padding: 10px;
width: 200px;
}
#steam,
#youtube {
margin: 0px auto;
width: 80px;
display: inline-block;
text-decoration: none;
font-family: cursive;
font-style: oblique;
text-align: center;
}
#devil {
border-radius: 120px;
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
a:link,
a:visited {
color: forestgreen;
}
<div class="container">
<img id="devil" src="img/frizzy.jpg">
</div>
<div class="social_container">
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
EDIT: jsfiddle
I have set
html{
height: 100%;
}
And
body{
min-height: 108%;
}
I want to show the content to full height to the footer even if content is empty.
This is container
And this is content
You can fix this by adding height:100% in addition to the min-height:108% to you body element:
http://jsfiddle.net/C8UUt/1/
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
min-height: 108%;
height: 100%;
}
Update
To make the sidebar1 full height you can use a little trick:
http://jsfiddle.net/C8UUt/3/
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
min-height: 100%;
position: relative; // added this to tell position:absolute that this is his parent
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
display: inline-block;
height: 100%; // to make it 100% height
position: absolute; // added this so it will take `min-height` of parent into account
}
.content {
padding: 10px 0;
width: 780px;
display: inline-block;
/* float: left; */
height: inherit;
margin-left: 180px; // since position:absolute doesn't take part in the normal flow, we must account for that space manually
}
if your browser supports CSS3 use this:
.container {height:100vh;}
I'm working a friend's site: http://www.lauraradniecki.com and I'm trying to get the newsletter bar to stay aligned with the body text, even when the browser is resizing. This works fine, if you're scaling down in size, but if you go up, the size between the text and the subscribe box starts to move away from each other. I can't figure out how to get this fixed
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
float: left;
}
#insideright {
float: right;
margin-right: 12%;
}
#insideright .formsubmit {
margin: -1px 3px 1px 16px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
Sorry if that's confusing- it's my first time posting here.
I would put the newsletter bar text in a container that is the same size as the body text container. Then set the left and right margins just the same as the body text containers.
Essentially you would make a smaller version of the main content container inside itself.
Assuming from your explanation and code the inside styles should be IN the subscribe id...
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
left: 0px;
position: absolute;
}
#insideright {
right: 0px;
margin-right: 12%;
position: absolute;
}
#insideright .formsubmit {
background: #ccc;
position: absolute;
right: 0px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
i have this page: http://www.nyccriminallawyer.com/felonymisdemeanor/
what i want to do is make the left inner box (the white one with Felony/Misdemeanor as title called .in_left) to be of 100% height of its parent (called .inner)
codes are here:
.in_left {
float: left;
width: 721px;
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 24px;
background-color: white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 11px -4px #000;
}
.inner {
background: #CCD7CC;
margin-top: 1px;
color: #5A5A5A;
padding: 10px;
clear: both;
overflow: hidden;
}
i have tried height: 100% and min-height as well, but it doesn't work.
Don't use float on .in_left and .in_right, use display:table-cell; on those and, most importantly, use display:table; on their container:
.inner {
display: table;
}
.in_left {
width: 229px;
/* other style */
display: table-cell;
}
.in_left {
width: 721px;
/* other style */
display: table-cell;
}
You cannot extend a child to be 100% the height of its parent, but you can make it look like it extends using the Faux Columns technique.
Setting the height of an element 100% only works if the parent elements height is somehow fixed (like height: 300px). But you can set the child element absolutely positioned (to its immediate parent) and set it's position in four directions:
.in_left {
...
position: relative;
}
.inner {
...
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Demo here: http://jsbin.com/OkIQUCi/1/