Hello i am looking for solution to do that:
http://www.delightfulwoman.pl/depilacja-laserowa/
When you click on the link on the left, the text changes inside right box...
I just want to know how to make that CornerRounded SemiTransparent div background, with scrollbar NEXT to it, not inside it.
You would say i can look into source file, but i am not that good at CSS, and i cant see transparency or opacity there :s or anything similar.
This website is using an image as the background for that DIV. They are using a PNG file which supports transparency. So in the CSS for the DIV (.o_right_cont) they are using an image of a rounded and translucent box instead of any fancy CSS.
On the inside of that DIV they have another DIV (.ofe_desc). They set the overflow to auto so that way the scrollbar would appear when the content is larger than the DIV.
.o_right_cont {
background: url(gfx/cennik_bg.png) no-repeat;
width: 670px;
height: 420px;
float: left;
margin: 10px 0px 0px 30px;
text-align: left;
padding: 10px;
}
.ofe_desc {
width: 662px;
height: 400px;
text-align: left;
overflow: auto;
line-height: 15px;
padding: 8px 30px 8px 8px;
}
Let me know if you have any questions.
Kind Regards,
- Chris
Related
I need to align an image just to the left of some text in an h1. So imagine it's something like:
[logo image] Company
So it isn't really a "background"--it's more of a foreground image.
This works if the h1 is left-aligned, using padding to offset the text from the image:
h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
}
However, I also want to center the text. I can do that as follows, but the image is still left-aligned:
h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
text-align: center;
}
In other words, the text is in the center of the screen, but the image is still on the left margin.
How can I keep the image centered, but just to the left of the text? I don't want to get too tricky with absolute pixel values, or a fixed-width h1, as this all needs to be relative and responsive.
I can't center the background image, as it needs an offset for the h1 text, which needs to scale.
Should I just slap an img tag in there and be done with this?
Another option would be to make the whole thing an image, but I want the text to scale--it's actually more of a caption than a logo.
[Note: I googled a bunch but most of the links deal with the "centered h1 over a large background image" scenario, which this isn't. Thanks!]
UPDATED
h1 {
background: no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
text-align: center;
}
h1:before {
content: url("logo.png");
float: left;
}
DEMO: http://jsfiddle.net/4HQ8T/3/
I learned something new about the content CSS here, thanks!
Here's my approach:
h1 {
text-align: center;
}
h1::before {
content: url("http://placekitten.com/200/80");
display: inline-block;
vertical-align: middle;
height: 80px;
width: 200px;
margin-left: -200px;
}
Since you know the image dimensions, you can play with negative margin-left. As you can see, the text alignment is NOT affected by the image. Is that what you wanted to achieve?
Here's the jsFiddle demo
Since you know how big everything is you could try it with background-position porperty and then give % value to x.
h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
text-align: center;
background-position:20% (e.g.);
}
But to be honest, i would recommend using an image tag. You can give that image some responsiveness like done in bootstrap Bootstrap
there are several options already, and this one comes with an "IF" but i'm adding it here for variety.
If you can specify the width of the H1 tag then you can use padding and margin:auto to achieve this.
h1#elementID {
background-image: url("img.png");
background-repeat: no-repeat;
margin: auto;
width: 165px;
padding-left: 45px;
}
adjusting the width / padding to fit your text image. It may improve scaling if you use something besides px as your sizing mechanism.
I am making a fullscreen website, and I would like to have a scrollable div to display text content ; here is my page : http://www.jeremy-dutheil.fr/barconniere/pages/enterprise
You can see that the scrollbar appears on the body, but this is not what I want ; I would like the scrollbar to appear only on the div content, and not on the body.
Any ideas ?
Thanks
Apply this style in your global.css
Line 109 I think, change your style in your #enterprise #textContainer {}
Like so...
#enterprise #textContainer {
background-color: #FFFFFF;
height: 445px;
margin: 20px auto;
overflow: auto;
padding: 20px 0 20px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
This code is just to show you how your div with your scrollbar will look like. You may further customize it according to your liking.
The style code above shall output a page similar to [BELOW IMAGE]. Look at that scrollbar, It's cute.
i want to know whats the best way to position text inside a block element.
foo
normal link but styled as display block with a background
display: block;
width: 100px;
height: 100px;
background: #000000;
the text now is top left.
now the question: what the best way to get this text to example: bottom-left or bottom-right?
i prefer CSS solution without any new elements inside the A-Tag. Some opinions?
You could also make use of display:table-cell - however, that won't work in <=IE7
http://jsfiddle.net/QU9gy/
you can't select content to sit along the bottom. By using padding (padding-top) you can manually make it look like ist's justified to the bottom.
so in the above example try
display: block;
width: 100px;
height: 14px;
background: #000000;
padding-top: 86px
You can try this too.
display: block;
width: 100px;
height: 100px;
background: #000000;
line-height:188px;
font-size:12px;
color:#fff;
text-decoration:none;
If you change your font-size than reduce than value from 200px :) means if you are using 18px font than line-height would be 182px so total no will be 200px;
okay, so I'm trying to set up a webpage with a div wrapping two other divs, and the wrapper div has a background, and the other two are transparent. How come this isn't working?
here is the CSS:
.posttext{
float: left;
width: 70%;
text-align: left;
padding: 5px;
background-color: transparent !important;
}
.postavi{
float: left;
width: 100px;
height: 100%;
text-align: left;
background-color: transparent !important;
padding: 5px;
}
.postwrapper{
background-image:url('images/post_bg.png');
background-position:left top;
background-repeat:repeat-y;
}
and here is the HTML:
<div class="postwrapper">
<div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div><div class="posttext"><p style="color: #ff0066">You will have bad luck today.</p>lol</div>
</div>
Edit: at request, here is a link to the site: http://prime.programming-designs.com/test_forum/viewthread.php?thread=33
The !important keyword has to come last (i.e. after the value), and transparent is a keyword not an RGB value expressed in hexidecimal (so it should not be prefixed with a #).
These issues would be picked up by a validator.
Since .postavi is floating, it doesn't influence the height of its container, so .postwrapper has a height of 0 and you can't see the background in it. There are various ways to work around this, I usually prefer the overflow: hidden method. See http://complexspiral.com/publications/containing-floats/ for an explanation as to why.
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.