In HTML:
Replace <div> with <div class=”dvul”>
In CSS:
Add
.dvul {border-bottom: 3px #000 solid}
or add a <hr> and style (CSS) accordingly.
To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool
There are others.
When editing CSS, use a Child Theme
http://codex.wordpress.org/Child_Themes
Custom CSS Plugin, or Theme provide custom CSS option.
Edits to parent themes are lost on theme update.
Learn CSS: http://www.w3schools.com/css/
Thanks a lot for the heads up on those tools, I use Firebug personally, just didn’t know how to use it to figure out what I needed to add in this case.
Might you be so kind as to let me know what I’m doing wrong? I added both things, but the lines still aren’t showing up.
Here’s what the end of my style.css now looks like where I added the declaration (or whatever you call it):
}
#leftcolumn { width: 300px; border: 0px solid red; float: left}
#rightcolumn { width: 600px; border: 0px solid red; float: right}
}
.dvul {border-bottom: 3px #000 solid}
/* Begin Additional CSS Styles */
/* End Additional CSS Styles */
Here’s a link to the html code for this particular page, after replacing the <div> tags.
You have an extra bracket above that code – here:
#rightcolumn { width: 600px; border: 0px solid red; float: right}
}
.dvul {border-bottom: 3px #000 solid}
The easiest way to find these kinds of problems by using the validator:
http://jigsaw.w3.org/css-validator/
Thanks, I just made sure to add that to my bookmarks.
I removed that bracket and the lines still aren’t showing up.
Here’s what that section looks like now:
#rightcolumn { width: 600px; border: 0px solid red; float: right}
.dvul {border-bottom: 3px #000 solid}
/* Begin Additional CSS Styles */
/* End Additional CSS Styles */
I ran it through the validator, but I don’t see any errors referencing that section of code. What am I doing wrong here? Thanks for your help, by the way.
They’re showing up fine – clear your browser cache :).
They’re showing up now; thanks for your help!
#rightcolumn { width: 600px; border: 0px solid red; float: right;}
was missing closing ;
.dvul {border-bottom: 3px #000 solid;}
(we both missed that!)
I try to mark CSS up like this usually, easier to read and check
#rightcolumn {
width: 600px;
border: 0px solid red;
float: right;
}
.dvul {
border-bottom: 3px #000 solid;
}
