TLDR: click the bottom image and my noob problem becomes immediately evident.
Hi, all
I have two <div> elements that I want to separate with a <hr class="separator"> element.
The CSS code for the <hr class="separator"> element is as follows:
hr.separator {
border-top: 1px solid black;
margin-top: 70px;
margin-bottom: 0;
padding: 0;
}
The CSS code for the bottom <div class="brown"> element is as follows:
div.brown{
margin-top: 0;
padding-top: 70px;
background-color: #ce9771;
}
In the HTML code, these elements are set like this:
<div> upper div \<div>
<hr>
<div> bottom div \<div>
Still, I have a vertical whitspace (about 3px) between them. I've already tried to set all margins and padding to "0", and even played around with making the <hr>a child of each <div>and playing around with the position attribute (which invariably made the <hr>disappear).... Can anyone help a newbie here?
With:
hr.separator {
border-top: 1px solid black;
margin-top: 70px;
margin-bottom: 0;
padding: 0;
}
you only set/change the top border but the hr could also have other borders.
So first remove all borders with border: none; and then set the top border:
hr.separator {
border: none;
border-top: 1px solid black;
margin-top: 70px;
margin-bottom: 0;
padding: 0;
}
div.brown{
margin-top: 0;
padding-top: 70px;
background-color: #ce9771;
}
<hr class="separator">
<div class="brown">
</div>
Whenever you have you don't know why something looks wrong you should check the computed properties of the style that is applied for that element in the developer tools of your browser.
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
This is my first post. I'm still learning CSS and your help is much appreciated.
I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.
The closest thing to it is on Vimeo here:
http://vimeo.com/categories
I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.
Here's my CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
and here's my HTML:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<div class="videoCatTitle">Some Text Here</div>
</div>
Any advice on what I'm doing wrong is very welcome.
Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).
Just had the problem. None of the solutions were working (border, background, hasLayout).
In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}