Check this jsfiddle
Is it possible to have centered text in a div that only has a margin to the left?
Basically centering the text according to the black box but not going outside the red box.
One solution would be to put text-indent: -25% but when we resize the window and make it smaller some parts of the text will be hidden.
Any ideas?
Update: I want the text to be centered to the black box, but not go outside the red box. And I don't want any margin/padding to the right
Used to Pseudo-elements
:after
Write this css
h1 {
display:block;
position:relative;
background: red;
height: 100px;
line-height: 100px;
margin: 0 0 0 0;
font-size: 2em;
}
h1:after{
content:'';
left:0;
top:0;
bottom:0;
width:25%;
position:absolute;
background:#000;
}
Live Demo
More information about this
About Pseudo-elements
I dont exactly understand what you are trying to do, but margin-left: auto; margin-right: auto; does the trick.
http://jsfiddle.net/j8CYE/14/
check out this FIDDLE
first set you div width and then set your h2 as width: inherit
Related
I have a div that will show a picture in a bigger size.
So I want this div to be in the center of the screen. but margin 0 auto is not working...
CSS:
.form_postloader{
max-width: 1100px;
min-height: 400px;
background: #ffffff;
color: #000;
position:absolute;
margin:0 auto;
display:block;
}
http://jsfiddle.net/t5t031zj/
thank you!
it's not working because it's absolute positioned. You could remove the position absolute, or, if you need it you can do it like so:
position:absolute;
left: 50%;
transform: translate(-50%);
no need to set width, completely responsive!
http://jsfiddle.net/t5t031zj/2/
Due to position:absolute you need to use left and right to do this.
left:0;
right:0;
width: 400px;
Applying these to your box will center it, the issue is that you need to set a width.
Here is a fiddle: http://jsfiddle.net/t5t031zj/3/
Is it possible to make an HTML Element fixed so it stay at the same position when the user scrolls?
The Problem is: If I use "position:fixed", The Elements loses its relation to the containers and changes the actual position. It pops out of the site wrapper (of course) but I would like it to keep its position and just also keep the position when scrolled.
Is that possible?
You can do this by setting the elements position to fixed, but don't set its top, left, bottom or right parameters.
As long as you don't set them, your element will stay on the place where it belongs (relative to the initial parent positioning)
.your-element{
position: relative;
}
Check this fiddle
With css you can only do this with position:fixed. The problem you line out can be mitigates somewhat if you know the height of the element. You can set margin-top on an element around the content to offset it from the top.
#topbar {
height: 5em;
}
#content {
margin-top: 5em;
}
#topbar {
position:fixed;
top:0;
left:0;
width:100%;
height:5em;
background: yellow;
border: 1px red dotted;
}
#content {
margin-top: 5em;
padding-top: 5px;
background: #EEEEFF;
border: 1px blue dotted;
height: 500em;
}
<div id="topbar">Something in the topbar</div>
<div id="content">This text is magically displayed under the topbar</div>
Im trying to make a 960px, float left website and using black transperent divs with text in them. The problem is that the text has the same color as the div, but I want it to be white or at least not the same as the div. How can i do this?
This is my CSS for the moment, the problem is that position is set to relative, but I just want to use diferent divs and use "float: left". If I remove "position: relative" the transparent color of the div disappears.
.content {
position:relative;
color:White;
z-index:10;
float: left;
text-align: center;
left: 365px;
font-family: Arial;
margin: 10px;
top: 15px;
}
.background {
position:absolute;
border-radius: 10px;
width:960px;
height: 70px;
background-color:Black;
z-index:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:.5;
top: 80px;
}
Use transparent background instead with:
background:rgba(0,0,0,0.5);
The content inherits the opacity of your container. Explicitly set the opacity of the content to not be .5 but 1.
This seems to be working fine, see the fiddle and tell me if it's working for you. I've changed the width to % but it works just as well on px, ijust wanted to remove the scrolling in the fiddle, and changed the Color:White; to color:#fff;
Fiddle
I've got a div that is fluid width depending on the browser. I have a border image that I want to have on both the left and right side of the div. How would I do that? I have the left side working as needed:
#conten {
background: #fff url(/images/pagebgleft.gif) top left repeat-y;
color: #333333;
float: none;
width: 80%;
max-width: 1080px;
margin: auto ;
}
I want to use an image url(/images/pagebgright.gif) for the right side. Thanks!
Use multiple backgrounds or put another wrapper div and set the right hand background to it.
I may have posted too late. Each border needs to be in it's own div and absolutely positioned inside a relative position container. The background image I'm using happens to be an animated border gif i got from google.
<div class="wrap">
<div class="leftb"></div>
<div class="rightb"></div>
</div>
.wrap{
position:absolute;
width:400px;
height:400px;
background:#ccc;
}
.leftb, .rightb{
position:absolute;
top:0;
background: transparent url(http://www.capriogroup.com/webstuff/Images/Borders/Animated-Border-ChainLinksVertical.gif) repeat-y 0 0;
color: #333333;
width: 20px;
height:400px;
}
.leftb {
left:0;
}
.rightb {
right:0;
}
Check working example at http://jsfiddle.net/ZxQ6Z/1/
I have a css and HTML code which has two sections in the header: one for Logo and other one for navigation. I wanted to put both in the same line so that it saves some space and looks much better. Can someone guide me on how I can do that?
http://css.pastebin.com/AdGMQum5
Set width for your logo for example 100px;
Float:left; logo
Remove width:100%; and float:left; from #nav
Add overflow:hidden; for #nav
add clear:left; for #content
Live example: http://jsbin.com/eyozo
The easiest method is simply to use a background-image on the h1 element:
h1 {
padding-left: 200px; /* width of the image plus a 'buffer' between image and text */
height: 150px; /* vertical height of the image */
line-height: 150px; /* to vertically-align the image with the text */
background: #fff url(path/to/image.png) 0 0 no-repeat;
}