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;
}
Related
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>
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
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 have a header element into which I want to put a background image but I want to put it on end. So whatever the width of text is it will remain always after the text ending. Possible? How?
<h1>Here is my dynamic text</h1>
If you want to put it really behind the text you should use pseudoelements:
h1:after { content:url(myimage.png); }
Sample here.
If you want to have a real background image you can only do this if you change the h1 to display:inline, since otherwise the element will stretch to the full width of its parent, thus losing all reference to the size of the contained text.
All other solutions (including the other ones mentioned here) require changing the HTML markup, and are as such not pure CSS solutions.
Something like this:
h1
{
background-image:url(https://s.gravatar.com/avatar/c6a0ac3e18f1cd8d0f1be4c2e3a4cfbd?s=32&d=identicon&r=PG);
background-repeat:no-repeat;
background-position:right;
padding-right:40px;
display:inline-block;
}
<h1>Here is my dynamic text</h1>
So backgorund image to the right with padding so it's always outside your text. The display:inline-block is important because it stops your test filling the whole line
Simply at a span for that background image as a child of <h1>, like this:
<h1>Here is my dynamic text <span class="chevron"></span></h1>
CSS:
h1 {
position: relative;
}
.chevron {
background: url(images/chevron.jpg) no-repeat 0 0;
width: xxpx; /* width and height of image */
height: xxpx;
position: absolute;
right: 0;
top: xxpx; /* adjust the position of the image to the heading text from the top */
}
You can use :after in your css like
h1:after
{
background:url(image path)no-repeat;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
look for example http://jsbin.com/uzorew/1
You could try adding div with background img
<h1>Here is my dynamic text <div id="dynamicimage"></div></h1>
#dynamicimage{
background-image: url("images/myimg.png");
}
may i sure tyr this css :
h1 {
height:25px;
overflow:hidden;
position:relative;
}
h1:after {
background:red;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:0 0 0 5px;
}
your html :
<h1>Here is my dynamic text </h1>
Pseudo element background image
Although several answers have already suggested the use of CSS's :after, none (at the time of my posting) have shown how to handle the sizing of the image.
Below you'll see that the standard syntax for setting a background image can be applied to an empty content when (as shown in a few other answers) the position is set to absolute.
The width and height properties will set the dimensions of the after pseudo element, but the image size needs to be set via the background shorthand or background-size properties.
i.e. to set the image size to match the size of the after element, use:
background: url( path to image ) no-repeat center/contain;
where center/contain will center and contain the image ;-)
Note that in the snippet below, where the image size hasn't been set correctly, the results are obviously incorrect:
h1:after {
position: absolute;
/* no size or position settings */
background: url(https://lorempixel.com/200/200/) no-repeat;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
But in the following snippet, where the image size has been correctly set, the results are full of awesome:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
To adjust the size of the after pseudo element itself, change the width and height properties like so:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
And as pointed out by Tepken in his answer, use the top property to adjust the vertical alignment. However, make sure the after's parent also has its position property set, or the image will consider the top to be relative to one of its grandparents:
h1 {
/* the parent must have its position set also */
position: relative;
}
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
/* vertically align the image */
top: .35em;
}
<h1>Here is my dynamic text</h1>
Very simple
<div class="content"><h1>Header<img src="one.jpg"></h1></div>
include the image within the header
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