Having trouble inserting a gold border after every first child under #content in wordpress..
#content .spacer h1:first-child:after{
display:block;
content:'';
width:45px;
border-bottom:3px solid rgb(229,164,20);
margin:40px 0;
padding:5px 0;
}
either or doesn't work
#content .spacer h1:first-child:after{
display:block;
content:'';
width:45px;
border-bottom:3px solid rgb(229,164,20);
margin:40px 0;
padding:5px 0;
}
I am making an assumption for your HTML markup and you wanting to add a empty block with gold border after each H1 element in DIV #content.spacer.
It would be proper to use h1:nth-child(1):after
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content" class="spacer">
<h1>First-child</h1>
<h1>Children</h1>
<h1>Children</h1>
<h1>Children</h1>
</div>
</body>
</html>
CSS
#content.spacer h1:nth-child(1):after{
display:block;
content:'';
width:45px;
border-bottom:3px solid rgb(229,164,20);
margin:40px 0;
padding:5px 0;
}
JSBIN sample here: http://jsbin.com/wejefixajiro/1/edit
Related
I have a simple unordered list beside beside two other divs, all 3 contained within a parent container. Here's how it looks like: https://jsfiddle.net/f0bz4hc0/1/. If you zoom in, you can see that all 3 have borders around them, but the borders around the list items and the anchors extend beyond the container's bottom border while the two other divs are snug. Why does this happen and how can I fix it so that everything is within the container?
<!doctype html>
<html>
<head>
<title>practice</title>
<meta charset='utf-8' />
<style type='text/css'>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.page{
width:960px;
height:300px;
margin:0 auto;
border:1px solid red;
}
.row{
width:100%;
}
.header{
background-color:black;
height:40px;
}
.logo{
background-color:orange;
height:100%;
width:40px;
float:left;
display: inline-block;
}
.home{
display: inline-block;
height:40px;
width:40px;
float:left;
border:1px solid cyan;
}
.home img{
width:100%;
height:100%;
}
ul{
float:left;
height:100%;
}
ul li{
display: inline-block;
border:1px solid teal;
}
a{
display: inline-block;
color:white;
height:40px;
line-height: 40px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class='page'>
<div class='header row'>
<div class='logo'></div>
<div class='home'><img src='house.png' /></div>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
</div>
</body>
</html>
If you remove the set height on .header and make it inline-block, you'll see that the borders of on your anchors remain contained in their parent.
.header {
/*height: 40px;*/
background-color:black;
display: inline-block;
}
https://jsfiddle.net/q5mxbywp/
2 things (and I'm sure they're related)
I would like my lightbox-style absolute div (.g) to be the height of the page not the window (click on the link in the html to display it)
I would like my img in the absolute div (.g img) to respond to the window height.
Is this possible? I've tried a number of things having searched extensively but my rudimentary knowledge of html and css is failing me. e.g. if I use min-height:100% on html then my div.g is the height of the page but the main content div (#d) doesn't stick to the bottom of the window.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="d">
<div id="c">
<p style="margin-bottom:450px">click for images</p>
<p>end text</p>
</div>
<div id="f">footer</div>
</div>
<div class="g" id="a1">
<div>
<img src="http://www.JBM-Computing.net/test/img1.png">
<p>click img, or here to close</p>
</div>
</div>
<div class="g" id="a2">
<div>
<img src="http://www.JBM-Computing.net/test/img2.png">
<p>click here to close, or click img</p>
</div>
</div>
</body>
</html>
CSS
* {margin:0;
padding:0
}
html {height:100%
}
body {height:100%;
font-family:Arial;
background:lightSteelBlue
}
#d {position:relative;
top:2%;
right:0;
bottom:2%;
left:0;
margin:0 auto;
width:80%;
max-width:840px;
min-height:96%;
background:white;
border:solid 1px green
}
#c {position:relative;
margin:4% auto 40px;
max-width:80%;
padding:5px;
border:solid 1px red
}
#f {position:absolute;
right:10%;
bottom:0;
left:10%;
max-width:80%;
padding:5px;
background:lightGrey
}
.g {position:absolute;
top:0;
right:100%;
bottom:100%;
left:0;
z-index:4;
overflow:hidden;
background:RGBA(0,0,0,.7)
}
.g:target {bottom:0;
right:0;
overflow:visible
}
.g a.x {position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:5
}
.g div {position:relative;
z-index:6;
margin:8% 8% 0;
background:powderBlue;
border:10px solid darkKhaki
}
.g img {display:block;
max-width:100%;
margin:auto;
border:solid 1px blue
}
.g p {padding:5px
}
I've also posted it on jsFiddle here. Resize the window and watch the page react.
It behaves acceptably at the moment but it's not perfect.
Any help greatly appreciated.
Edit: why does .g:target {bottom:0} not make the div fill the whole height of the body?? It should shouldn't it?
If I understand your question correctly, the problem is .g div - margin:8% 8% 0; which prevents the pop-up from displaying in full page size.
.g div {position:relative;
z-index:6;
height: 100%; <=== Full page size
box-sizing: border-box; <=== Prevent vertical scroll bar
/* margin:8% 8% 0; */ <=== Problem, so comment out
background:powderBlue;
border:10px solid darkKhaki
}
jsfiddle.net/W8kxm/
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
I want to position my footer at the baseline of my #wrapper but all I seem to be able to do is get the footer positioned below the wrapper. Can someone please tell me why this is happening?
Also, if someone sees a problem with how I have this currently designed and has a better way, I'm open to any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
html, body {
width:100%;
background:brown;
border:0px solid red;
margin:0;
padding:0;
}
#wrapper {
width:1220px;
height:750px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
#header {
background-color:#aaa;
width:100%;
height:100px;
padding:0;
margin:0 auto 0 auto;
border:0px solid;
}
#content {
float:left;
width:100%;
height:649px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#bbb;
float:left;
width:200px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1010px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
float:left;
width:100%;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="cell-left">dsssd</div>
<div id="cell-right">dsssd</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
You should remove the fixed height on #wrapper (height:750px), and clear the floated elements inside #wrapper properly.
The easiest way to do this is to add overflow: hidden to #wrapper.
See: http://jsbin.com/iciwo6
The changed CSS:
#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
You have mentioned the wrapper height 750 that is showing problem.Just make it clear and give height:auto
You have given
header: `height:100px;`
content: height:649px;
so it is taking almost 750px .so there is no space for footer.so it is coming just below the wrapper.So try to give height:auto.
Here is the code i'm working on it's not a page it's a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I'm asking myself what the heck is this margin for a while here
Let's picture that I can't use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?
Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?
Original Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="light-blue"></div>
<div class="light-green"></div>
<div class="heavy-red"></div>
</div>
</body>
</html>
Solved: solution is eliminate the spacing in the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>
</div>
</body>
</html>
The problem is caused by spaces in the markup between the divs. If you don't want to float them (why not I wonder), you have a couple of options.
Remove the spaces so that the markup is all on the same line.
If you don't ever want any text to appear in these divs then you can do this
div{font-size:0;}
I common practice in order your sites to be more cross browser compatible is to use a css reset file. Check this question https://stackoverflow.com/questions/116754/best-css-reset
in all your inner div classes use margin-left: 0px
.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}
.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
I have posted the final html at http://jsbin.com/uwavi3
I had to remove display: inline-block to get it to work on jsbin while on running it locally from a file I didn't have to. I think jsbin uses some sort of reset css.
Edit2 for float: left kinda layout
Sorry for misunderstanding the question.
Increasing the width of the parent div and using spans instead of div(for colored blocks like red, blue etc.) Works for IE8 and FF3.6. Check here http://jsbin.com/uwavi3/3
This is causing a margin on the left and right of every element (that is not display:inline):
* { margin:0 auto; }
You probably want this as your "reset" rule.
* { margin:0; }
You can then apply margin:0 auto to things that you want centered.