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.
Related
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 have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
I have some text and want it to be higher and inline with the first icon. This is it live: http://www.penguinie.co.uk/#projects the css is:
.german img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content {
display: none;
float: right;
width: 400px;
}
.german:hover .german-content {
display: inline-block;
border: 1px solid;
}
.german-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.chembond-content {
display: none;
float: right;
width: 400px;
}
.chembond:hover .chembond-content {
display: inline-block;
border: 1px solid;
}
.chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
overflow: scroll;
}
And this is the HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/bonding.png" height="60" width="50" />
<section class="chembond-content">
<p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend Elliott who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click here. I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
</section>
</section>
</section>
So when I hover over the second icon I want the text in the box to be the same height as the first one is when you hover over it.
Here is what you should add to your css:
.chembond-content {
display: none;
float: right;
width: 400px;
position: relative;
top: -72px;
}
You could add margin-top with a negative value to your CSS, but NO.
A much more maintainable solution would be to have only one <section class="content"> tag, align it, and with JS change the text when hovering over the relevant icon.
when making a question here with simple CSS and HTML consider doing a jsFiddle and sharing that instead of a personal link, otherwise when this is working and your live link changes then the question will be irrelevant.
The CSS Position Approach
So here is my fiddle minus a bit of code clutter:
Demo
The reason the second image is hovered to reveal the the section element with the class of .chembond-content and the element is not at the top (like the first image) is because you are floating it to the right but it's still part of the document flow after that image that you have right before the section.
If you want to have both elements open up in the same spot then you would get them out of the document flow by giving them a fixed or absolute position which in this example I simple set it to 20 pixels from the top and from the right.
Since these elements are not taking up space in the flow of your markup then you are free to position both at the top if you want to.
I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Use hr tag
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) use it like a after pseudoclass
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Which way is the most practical?
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Here is how html5boilerplate does it:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
I'd go for semantic markup, use an <hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the
<hr> tag represents a horizontal rule.
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
and use it like
<div class="block_1 hline-bottom">Cheese</div>
I wanted a long dash like line, so I used this.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}
<div class="dash"></div>
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color.
This can be done by setting the style directly or by defining a class, for example, like:
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
it is depends on requirement , but many developers suggestions is to make your code as simple as possible .
so, go with simple "hr" tag
and CSS code for that.
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
emphasized text
This is relatively simple example and worked for me.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html
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: '___________';
}