I will create page follow image but I can't.
this image is page that I created.
I coding .css file follow this code for orange border.
> p {background-color: #ff6138;
width: 1535px;
height: 200px
}
How to make user image display half between orange border and white background?
Try to use negative margin-top for avatar img tag, something like
img#avatar {
margin-top: -50px;
}
(50px value is just ballpark and you need to adjust it)
Related
I am wondering how to accomplish this logo background found here
if you notice the logo floated to the left and how the white "D" is on a red color background that fills the entire height of the header. I know how to float it and everything, I just need to know how to make a background color with a certain width to fill the entire height of the header like so. And by the way I am assuming that there is no set height already for the header.
Thanks in advance!
Whatever id or class your floated div is for the logo, simply apply a background color to that in CSS.
If you're looking for some sort of dynamic height application; set the html, body, and enclosing div elements to all have 'height:100%'.
Posting a sample of your code would help.
You may want to try something like this (fiddle here):
HTML:
<div id="Header">
<img id="Logo" src="http://goo.gl/uDkk1X" />
</div>
CSS:
#Header {
width: 600px;
height: 60px;
background: #333333;
}
#Logo {
width: 60px;
height: 60px;
float: left;
background: #666666;
}
As you can see, the image already has transparency, so any background color set to this block would render behind the actual image. Either that or put your img inside another container with a specified background color.
I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.
I am working with some html tables inside of html tables and I am having trouble doing some specific styling. Here is my table:
Note: The blue part is the hover.
The specific things I want to do are:
1. Make the image in each cell fill the entire cell (instead of having that much blue space)
2. Make the image enlarge when you hover on the image.
3. Make the right section (with the info and buy button) have a light grey background.
Here is my fiddle.
(the fiddle made my output looked stretched and Im not sure why)
1 . change the padding of the .table td
2 . Something with img:hover, maybe this:
img:hover {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
But there you have to leave the browser window to get the old size...
3 . <td bgcolor=gray>
You can view the page in question here: http://www.envisionlocal.com/
Underneath the blue, you'll see where there's a blank white space before the grey area starts. I believe it's this code:
<div class="bottom_part"></div>
Which uses this CSS:
#banner .bottom_part {
clear: both;
padding: 167px 0 0;
}
But when I remove that from the HTML, I still get the same white space on the page. Does anyone know what I need to change to remove it?
You should inspect your page.
body {
background: url("../images/body_bg3.jpg") repeat-x scroll left 0 #F3F4F4;
}
This is the image: http://www.envisionlocal.com/images/body_bg3.jpg
Your background is one whole image, that gives the impression that there is white space when you remove your div.
Change your background-image:'body_bg3.jpg' in body element
Drip was right, need to fix background image on body.
To fix the issue replace file images/body_bg3.jpg with this
http://i.stack.imgur.com/sTwFE.jpg
and remove dev with class "bottom_part" from html
It's part of the background image here: http://www.envisionlocal.com/images/body_bg3.jpg
When you zoom in you can see a 1px wide image that is repeated horizontally with this style:
background: #F3F4F4 url(../images/body_bg3.jpg) repeat-x left 0px;
You can crop the blue part out of the image or mimic the image with a div structure and styling.
I need to use sprites as a background image for element type of <a> tag.
The problem is that I need to display only one part of the sprite (for example 17px x 17px) and container can be higher. In this case, instead one my background image and than empty space, I get image I wanted to have and under that next image (which I don't want to display).
Is there any way to limit the height and width of the square on sprite i would like to display? I cannot set just height and width for the whole <a> tag.
Example:
And what i would like to do is not displaying the part from second image which is on the same sprite (its' only example; in the project i display text in the whole line, so changing width is not a solution)
Set the height and width for the sprite
a {
display: block;
background: url(sprite.png) no-repeat;
height: 17px;
width: 17px;
}
EDIT : after OP put a screehshot
You will need to use the :before pseudo selector along with the content property
Build a demo at http://jsfiddle.net/SqbnC/
a:before{
background:url('http://pf.staticfil.es/hp/img/sprite2.png');
width: 22px ;
height: 22px;
display:inline-block;
content:"";
}
I have specified the height and width as 22px because that's the dimension of the icon that i show from the sprite
You should use background position in your css class.
As an example..
.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}
Update the value 0 and -20 based on your image portion which you wanted to show in the div. And finally you should not use IMG tag on your Anchor tag, you have to pass the image via CSS class as above.
<a class="classsample" href="#">TEXT</a>
Use padding if there are no text in the Anchor tag.