I have a problem regarding HTML and CSS.
Design include zig zag "border". Those zig-zag comes at the top and bottom of the page.
Between those borders is white paper. Paper must be under zig-zag borders.
Here is how it looks at the top of the page now:
And here is how it looks at the bottom of page:
Here is my HTML:
<div id="glava">
<div id="ogrodje-glava">
<div id="scr"></div>
<div id="rob-glave"></div>
<div id="logo"></div>
</div>
</div>
<div id="sredina">
<div id="ogrodje">
<div id="leva"></div>
<div id="desna">
<div class="vsebina"></div>
</div>
</div>
and here is my CSS:
#CHARSET "UTF-8";
h1, h2, h3, h4, h5, h6, p, body, td {margin:0; padding:0;}
body { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif ; background-color: #fff; background-image: url("../img/papir-ozadje.jpg"); background-repeat: repeat-all;}
td {font-size:13px; min-width:50px;}
table {padding-bottom:15px}
.clear {clear:both;}
a {text-decoration:none; color:#333}
#glava {background-image: url("../img/background-head.png");
background-repeat: repeat-x;
width:100%;
height:210px;
margin-top:10px;
}
#ogrodje-glava {width:1025px; margin: 0 auto; padding:0; height:210px; }
#noga {background-image: url("../img/background-noga.png");
background-repeat: repeat-x;
width:100%;
height:160px;
position:relative;
}
#crta {width:100%; border:1px solid white; position:absolute; top:15px;}
#logo { background-image: url("../img/logo.gif");
background-repeat: no-repeat; width:172px; height:172px;
margin-left:35px;
position:relative;
top:-10px;
}
#scr { background-image: url("../img/scr.gif");
background-repeat: no-repeat; width:817px; height:41px;
float:right; margin-top:85px;}
#rob-glave {width:800px; height:84px;
float:right;
/*background-image: url("../img/background-head2.gif");
background-repeat: repeat-x;*/
}
#sredina { width:100%; background-image: url("../img/ozadje-papir.jpeg");
background-repeat: repeat-y;}
#ogrodje {width:1030px; margin: 0 auto; min-height:750px; padding:0; /*border:1px solid black;*/}
#ogrodje #leva {width:230px; min-height:750px; /*border:1px solid black;*/ margin:0; padding:0; float:left;}
#ogrodje #desna {width:800px; min-height:750px; max-height:750px; /*border:1px solid green;*/ margin:0; padding:0;
background-color:#fff; float:left; overflow: auto; padding-bottom:10px; position:relative; }
.letnice {margin-top:20px; border-bottom:1px solid #828284; height:10px; margin-bottom:40px;}
.letnice ul {width:100%; margin: 0 auto; padding:0; margin:0; }
.item-106, .item-107, .item-108, .item-109, .item-110 { float:left; width:90px; list-style:none;
background-image: url("../img/letnica.png");
background-repeat: no-repeat; height:25px; text-align:center; margin-left:45px;
}
.item-110 {margin-left:70px;}
.texti { padding-left:10px;}
.jeziki ul {/*width:510px; height:30px; background-image: url("../img/jeziki-ozadje.jpg");
background-repeat: no-repeat; */ width:510px; height:30px;
background-color:#f1efe5; margin-left:70px; }
.jeziki li {float:left; width:123px; height:30px; }
.jeziki .item-102 { list-style-image: url("../img/english.gif"); padding-top:5px; padding-right:2px; }
.jeziki .item-103 { list-style-image: url("../img/france.gif"); padding-top:5px; padding-right:2px;}
.jeziki .item-104 { list-style-image: url("../img/english.gif"); padding-top:5px; padding-right:2px;}
.jeziki .item-105 { list-style-image: url("../img/france.gif"); padding-top:5px; padding-right:2px;}
.jeziki a {text-decoration:none; color:#666; font-size:13px; }
.jeziki .current a{color:#BE1E2D;}
.letnica p {text-decoration:none; color:#333; padding-top:5px; }
#galerija { height:750px; width:133px; margin:0 auto;}
#galerija .slika { width:133px; height:100px; float:left; margin-top:5px; border:8px solid white;}
#galerija .slika-h { visibility:hidden;}
.besedilo { padding:0px; margin:0px;}
.besedilo p {font-size:13px; }
.besedilo h1 {font-size:20px; color:#000; /*border:1px solid black;*/ text-transform:uppercase; padding-bottom:10px;}
.besedilo h2 {font-size:15px; color:#BE1E2D; /*border:1px solid blue;*/}
.besedilo h3 {font-size:13px; color:#000; font-style:italic;}
/** PROGRAMME ***/
h4 {font-size:25px; color:#000;} /* programme podnaslov */
/*.besedilo p {font-size:13px; }
.besedilo h1 {font-size:23px; color:#000; padding-top:15px; border:1px solid black;}
.besedilo h2 {font-size:19px; color:#000; border:1px solid blue;}
.besedilo h3 {font-size:16px; color:#BE1E2D; }
*/
#info {width:1030px; margin: 0 auto; height:150px; font-size:13px;}
#info .prazen {width:300px; height:145px; float:left;}
#info .info {width:200px; height:145px; float:left; padding-top:15px;}
#info .info2 {width:200px; height:145px; float:left; padding-top:15px;}
#info .info3 {width:200px; height:145px; float:left; padding-top:15px;}
#info .info h4 {background-image: url("../img/info-noga.gif"); background-repeat: no-repeat; height:30px; margin-top:5px;}
#info .info p {padding-left:15px;}
#info .info p .ime {font-style:italic; }
#info .info2 p .ime {font-style:italic; }
#info .info3 p .ime {font-style:italic; }
/***** JOOMLA *****/
.item-page {padding-left: 40px; padding-top:10px; padding-right: 70px; padding-bottom:10px;}
.item-page p {text-align:justify;}
.item-page hr { border:1px dotted #BE1E2D; margin-right:300px;}
.item-page .logo{margin:0 auto;}
.item-page .home {font-size:15px;}
Any suggestions how should I resolve problem?
Best regards
I think that what you're looking for is the z-index attribute.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
When I try to validate my CSS code on w3c, it gives me these errors sorry if this has already been asked but I can't seem to find an answer. Some errors where fixed but these ones are still there.
Parse Error <html> <head> > <title>style2.CSS</title> </head> <body> html{ background-image: url(headerimg.jpg); }
130 Parse Error
<head>
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
<title>style2.CSS</title>
</head>
<body>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</body>
Your meta tag has erroneous semi-colons:
This:
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
Should read:
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
As the validator suggests, there was a parse-error at the semi-colon before the content attribute. That is because you are not supposed to separate attributes with semi-colons. You use white-space characters to separate attributes.
You should put CSS inside style tags
<style>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</style>
Include this in head tag
html
<footer>
<div class="Footer_Container">
<div class="Footer_Rows">
<div class="span3" id="sspan1">
<h5>CONTACT</h5>
<ul>
<li>chris#pagemotion.com</li>
<li>(03) 013 3134114</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan2">
<h5>FOLLOW</h5>
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan3">
<h5>VISIT</h5>
<ul>
<li>6700 N New York Ave Suite 233 Portland, OR 97203</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan4">
<img src="Image/mylogo.png" class="mylogo">
<!-- <img src="Image/rdio-icon.png" class="sg"> -->
</div><!--end of span-->
</div><!--end of FooterRows-->
</div><!--end of FooterContainer-->
css
footer{
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container{
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows{
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3{
width:16%;
position:relative;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5{
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul{
margin:0;
padding:0;
list-style:none;
}
.span3 ul li{
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a{
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
#sspan1{
margin-left:10px;
}
#sspan4{
margin-left:10px;
}
.mylogo{
width:150px;
height:100px;
}
please copy and paste i cant put link here , i want to make this responsive , which will be 2 box on top , 2 box on bottom . but i have no idea how to make it can any one show me how ?
so is like this:
A B
C D
thank ~
Are you looking for something like this?
http://jsfiddle.net/62uzV/
.span3{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
footer {
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container {
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows {
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3 {
width:50%;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5 {
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul {
margin:0;
padding:0;
list-style:none;
}
.span3 ul li {
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a {
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
.mylogo {
width:150px;
height:100px;
}
I have spent hours figuring out why my .clearfix does not properly push the parent element of h2 to fit the contents of inner tags.
I am sure I am missing something somewhere. Here is my CSS:
#epm-social-stream {
width:100%;
font-family:"Open Sans Regular",Helvetica,Arial!important;
color:#555;
}
#epm-social-stream .clearfix:after {
content:".";
visibility:hidden;
display:block;
height:0;
clear:both;
}
#epm-social-stream .btn-sm {
font-size:12px;
line-height:1.5;
padding:5px 10px;
}
#epm-social-stream .btn-default {
background-color:#fff;
color:#444;
border-color:#ccc;
}
#epm-social-stream .btn {
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
user-select:none;
background-image:none;
border:1px solid rgba(0,0,0,0);
border-radius:2px;
cursor:pointer;
display:inline-block;
font-size:14px;
line-height:1.42857;
margin-bottom:0;
text-align:center;
vertical-align:middle;
white-space:nowrap;
font-family:"Open Sans Regular",Helvetica,Arial!important;
padding:6px 12px;
}
#epm-social-stream h1,#epm-social-stream h2 {
font-family:"Open Sans Regular",Helvetica,Arial!important;
}
#epm-social-stream a {
cursor:pointer;
color:#0090ca;
text-decoration:none;
}
#epm-social-stream a:hover {
color:#0090ca;
text-decoration:underline;
}
#epm-social-stream ul {
list-style:none;
margin:0;
padding:0;
}
#epm-social-stream .epm-se-has-tooltip {
cursor:pointer;
}
#epm-social-stream div.epm-show-older {
cursor:pointer;
color:#ccc;
font-size:11px;
margin:5px 0 5px 50px;
}
#epm-social-stream div.epm-show-older:before {
content:"•••";
margin-right:5px;
position:relative;
top:1px;
}
#epm-social-stream div#epm-se-no-activity {
color:#ccc;
font-family:"Open Sans Light",Helvetica,Arial;
font-size:20px;
text-align:center;
display:none;
margin:0 auto;
}
#epm-social-stream li.epm-se-thread {
margin-bottom:20px;
}
#epm-social-stream li.epm-se-thread .epm-se-user-info a {
color:#555;
font-family:"Open Sans Semi Bold",Helvetica,Arial;
}
#epm-social-stream li.epm-se-thread div.epm-se-user-avatar {
float:left;
width:40px;
height:40px;
background-image:url(/_layouts/15/epmlive/images/default-avatar.png);
background-repeat:no-repeat;
-moz-background-size:40px auto;
-o-background-size:40px auto;
-webkit-background-size:40px auto;
background-size:40px auto;
margin-right:10px;
border-radius:50%;
}
#epm-social-stream li.epm-se-thread div.epm-se-user-avatar img {
width:40px;
height:40px;
border-radius:50%;
border:0 none;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info {
float:left;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
float:left;
color:#0090ca;
height:40px;
line-height:40px;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span {
margin-right:10px;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
font-size:14px;
}
#epm-social-stream li.epm-se-thread span.epm-se-object-info {
display:inline-block;
height:40px;
line-height:40px;
}
#epm-social-stream li.epm-se-thread span.epm-se-object-info a:hover {
text-decoration:none;
}
#epm-social-stream li.epm-se-thread span.epm-se-activity-time,#epm-social-stream li.epm-se-thread span.epm-se-object-info {
color:#ccc;
font-size:11px;
margin-left:10px;
}
#epm-social-stream li.epm-se-thread span.epm-se-activity-time span.epm-se-workspace:after,#epm-social-stream li.epm-se-thread span.epm-se-object-info span.epm-se-workspace:after {
content:"|";
margin-left:4px;
position:relative;
top:-1px;
}
#epm-social-stream li.epm-se-thread li.epm-se-activity {
margin:2px 0;
}
#epm-social-stream li.epm-se-thread li.epm-se-activity span {
display:inline-block;
height:20px;
line-height:20px;
}
#epm-social-stream li.epm-se-thread li.epm-se-activity span.epm-se-activity-icon {
width:40px;
margin-right:5px;
text-align:right;
font-size:10px;
color:#999;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments {
background-color:#f7f7f7;
border-radius:5px;
margin-left:25px;
margin-top:8px;
padding:5px 5px 5px 10px;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-show-older {
margin-bottom:10px;
margin-left:15px;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-user-avatar {
width:30px;
height:30px;
-moz-background-size:30px auto;
-o-background-size:30px auto;
-webkit-background-size:30px auto;
background-size:30px auto;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAABQVBMVEUAkMoBkMoCkcoAjskAjMgFkssAj8oBkcpnvd++4/LW7fa/4/Jsv+ECkcsEkst9x+R4xOMAjckBj8oAi8gqo9Ps9/vb7/cUmM4+q9fm9Poro9Pu9/vY7vcmodIDkcsAjcheud30+v1Hr9kAisdlvN9JsNkendDQ6/W64fAPlc15xeNZtt0AiccAj8kBjskmodLa7/fE5fIZm88Bj8kEkcqr2u2NzecAi8cDksswpdTQ6vW+4/EmoNIDkcpCrdib0+rk8/ng8vmW0epDrdg6qdax3e/1+/3x+fyy3u8AjckCkMpLsNnp9frr9/tQs9sFkcsVmc7T7PbZ7vcZm9Bat91gud4AiMZ6xeP7/f7y+fzz+v3x+fx+x+QAh8YFkssxpdQbnNAnodIUmc7////+///9/v/8/v77/f7+/v/9/v75/P6hsBPiAAAAY3RSTlPm5ubm5efm5vD4+/jw5uby8eXm5er9++js/Or9++nm5e/+7OXv7en6+Ofx7uXm5ur7+ejm5vbz5ebq+vjp5uz0/Pz07Ov3/v735ubt/f3t5uj6++ju7+Tx/v3+/fLk5urp6eiKNt80AAABHUlEQVR4Xu2R11LCQBhGt5nYEg1BQRQQsQvYe++9916+TQK+/wM4GYcZEljunfFcn/l2/rPk70MZ0Qij9SVBGojQ6q1EZhqbmltazyNU7fA2CQDtaV2l6Fa0A6500TnFVUNMbH9LQMquqKUrd967IVFEz4dyJ2X3uvDZ6xNM5WT78cuA0qF8cAgOHAyPaMrjWXYUjpTO2LxBlE5hfAIeJmPTTJnQpHwWHuZyCymqWCHCWlyCi+UVSxBWu+Dq2voGfDa34qzWZcza2c2gzP5B/PCoqnH6+AQoSfgUS8DpWfhjaf7iEp4jyzgerq65Hkp8gzC3OTPgmHf3D49PmQqevZfXt9BbsUTys5Jk4isfjsRtEcTm1ZENFsSg5B/yA5SrSKpfw4TxAAAAAElFTkSuQmCC);
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-user-avatar img {
width:30px;
height:30px;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment {
margin:5px 0;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment div.epm-se-user,#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment div.epm-se-comment-details {
display:table-cell;
float:none;
vertical-align:top;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-comment-text {
color:#777;
}
#epm-social-stream div.epm-se-comment-box {
margin:15px 0 0 25px;
}
#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input {
border:1px solid #eee;
border-radius:3px;
margin-bottom:10px;
min-height:20px;
padding:7px 10px;
}
#epm-social-stream div.epm-se-comment-box button {
float:right;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
user-select:none;
background-image:none;
border:1px solid rgba(0,0,0,0);
border-radius:2px;
cursor:pointer;
margin-bottom:0;
text-align:center;
vertical-align:middle;
white-space:nowrap;
font-family:"Open Sans Regular",Helvetica,Arial!important;
background-color:#fff;
color:#444;
font-size:12px;
line-height:1.5;
display:none;
border-color:#ccc;
padding:5px 10px;
}
#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input.epm-se-expanded {
min-height:75px;
}
#epm-social-stream div#epm-se-status-update-box {
display:none;
margin:0 0 20px;
}
#epm-social-stream div#epm-se-status-update-box div.epm-se-comment-input {
border:1px solid #ccc;
}
#epm-social-stream .btn-primary,#epm-social-stream div.epm-se-comment-box button.epm-se-active {
background-color:#0090ca;
color:#fff;
border-color:#357ebd;
}
#epm-social-stream a h2,#epm-social-stream a:hover h2 {
color:#0090ca;
}
#epm-social-stream .epm-se-hidden,#epm-social-stream div#epm-se-pagination span,#epm-social-stream li.epm-se-thread ul.epm-se-older-activities,#epm-social-stream li.epm-se-thread ul.epm-se-older-comments {
display:none;
}
#epm-social-stream li.epm-se-thread span.epm-se-activity-time a,#epm-social-stream li.epm-se-thread span.epm-se-object-info a,#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input.epm-se-placeholder {
color:#ccc;
}
Here is my HTML:
<div id="epm-social-stream" style="visibility: visible; display: block;">
<ul id="epm-se-threads">
<li class="epm-se-thread clearfix" id="epm-se-thread-30b23238-90b2-4337-887a-acac6366bde1">
<div class="epm-se-thread-header clearfix">
<div class="epm-se-user-avatar">
<img src="http://moon.epmlivedev.com/sites/epm56/User Profile Pictures/mpatel.png">
</div>
<div class="epm-se-thread-info clearfix">
<span class="epm-se-thread-icon icon-bubble-12"></span>
<h2>
Multi-line<br>comment<br>test<br>
</h2>
</div>
<span class="epm-se-object-info">
</span>
</div>
<ul class="epm-se-activities">
<li class="epm-se-activity clearfix" id="epm-se-activity-3b9b7112-05c4-4328-88c6-a180b3a4c143">
<span class="epm-se-activity-icon icon-bubble-12"></span>
<span class="epm-se-user-info">
<a class="epm-se-link" target="_blank" href="/sites/epm56/_layouts/15/userdisp.aspx?ID=17">You</a>
</span>
<span class="epm-se-activity-info">made a comment</span>
<span data-placement="top" data-toggle="tooltip" title="Tuesday, April 8 2014 2:46 PM" class="epm-se-activity-time epm-se-has-tooltip">Today Apr 8</span>
</li>
</ul>
<ul class="epm-se-older-activities"></ul>
<div class="epm-se-comments epm-se-hidden">
<ul class="epm-se-older-comments"></ul>
<ul class="epm-se-comments"></ul>
<ul class="epm-se-latest-comments"></ul>
</div>
<div data-threadid="30b23238-90b2-4337-887a-acac6366bde1" class="epm-se-comment-box">
<div contenteditable="true" class="epm-se-comment-input epm-se-placeholder">Add a comment...</div>
<button id="epm-se-comment-post-30b23238-90b2-4337-887a-acac6366bde1">Post</button>
</div>
</li>
</ul>
</div>
Here is a JS Fiddle.
You just need to remove the height: 40px from the h2 to allow it to extend to whatever height necessary.
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2
currently fixes the height of h2 to 40px, any overflow is shown outside the h2 area, unless you add overflow:hidden;.
If you want it all shown either remove height or change it to min-height.
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
float:left;
color:#0090ca;
min-height:40px;
line-height:40px;
}
I hope that helps.
I have a nav with five buttons that display on top of each other. I have set the height set to the height of just one of the buttons and my overflow set to visible. The four buttons display on top of the div I have below my nav like they should. However, these buttons move elements within my div down and don't display on top of them. If you're confused, you can see what I mean with my JSFiddle link at the bottom of this post.
What I want is for the last four buttons in my nav to overlap anything below it without offsetting it.
Here's my html:
<body>
<div id="mobile"></div>
<nav>
<ul id='nav'>
<li><icon><img src="images/home-icon.png"></icon>Home</li>
<li><icon><img src="images/skills-icon.png"></icon>Skillsets</li>
<li><icon><img src="images/gallery-icon.png"></icon>Gallery</li>
<li><icon><img src="images/about-icon.png"></icon>About</li>
<li></icon>Contact</li>
</ul>
</nav>
<div id="main">
<h1>Test</h1>
<h2>Test</h2>
<p>Test</p>
</div>
</body>
And here's my CSS:
/***
Style sheet template for all web sites
****/
/*Fix display for old browsers*/
header, nav, footer, section, article, aside{
display:block;
}
/*Reset Browser Defaults*/
body, div, header, nav, footer, section, article, aside, h1, h2, h3, h4, h5, h6, p, ul, ol, li{
margin:0;
padding:0;
}
body{
background-color:#fff;
color:#000;
font-size:14px;
font-family:Arial;
text-decoration:none;
}
/*CSS properties for document*/
header{
padding:2%;
position:relative;
margin:0 0 0px 0;
color:rgba(255, 255, 255, .9);
}
header h1{
font-size:64px;
}
header div#mobile{
height:0px;
display:block;
}
#logo_div{
min-height:84%;
min-width:26%;
max-height:84%;
max-width:26%;
position:relative;
margin-bottom:1%;
}
#logo_div img{
position:absolute;
top:0;
left:0;
float:right;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:block;
height:100%;
}
img.logo{
z-index:99;
border:2px solid black;
}
header img.logo:hover {
opacity: .8 !important;
border:2px solid darkgray;
}
nav{
background-color:rgba(195, 165, 131, .0);
text-align:justify;
margin:auto;
width:94%;
height:27px;
overflow:visible;
float:none;
margin-top:2%;
margin-bottom:2%;
position:relative;
font:Calibri, 'Asul', serif, "Times New Roman", Times;
font-size:.7em;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
z-index:10;
}
nav ul{
height:27px;
overflow:visible;
}
nav ul li{
list-style-type:none;
}
nav a{
width:100%;
height:27px;
margin:0;
padding:0;
float:left;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
border-top: 1px solid #d4b873;
background: #d6ba65;
background: -webkit-gradient(linear, left top, left bottom, from(#8c7738), to(#d6ba65));
background: -webkit-linear-gradient(top, #8c7738, #d6ba65);
background: -moz-linear-gradient(top, #8c7738, #d6ba65);
background: -ms-linear-gradient(top, #8c7738, #d6ba65);
background: -o-linear-gradient(top, #8c7738, #d6ba65);
padding:0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 2em;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
text-align:left;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
border:none;
}
nav a:hover{
background: #785a28;
color: #ccc;
}
nav a:active{
border-top-color: #5c441b;
background: #5c441b;
}
icon{
display:inline-block;
vertical-align:top;
margin-right:10px;
padding:0;
position:relative;
height:100%;
width:27px;
background-color:rgba(255, 255, 255, .4);
}
icon img{
width:60%;
margin:20%;
}
#main{
background-color:red;
width:100%;
float:none;
margin:auto;
padding:20px;
text-align:justify;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
}
div#main img{
width:320px;
margin-top:15px;
}
#main h1{
background-color:red;
}
#main h2{
background-color:green;
margin:5px 10px -5px 4px;
color:#444;
}
div#main h3{
font-size:16px;
}
#main p{
background-color:blue;
margin:10px 2%;
font-size:14px;
}
#main ul li{
list-style-type:disc;
margin:0px 0px 4px 36px;
font-size: 15px;
}
#main ul li a{
text-decoration:none;
}
Here's a JSFiddle
If you were looking to keep the nav in the same position as your original fiddle, apply the position absolute to the ul element and not the nav element. you would also need to set a width to the ul element.
nav ul{
height:27px;
overflow:visible;
position:absolute;
width: 100%;
}
fiddle
Whenever you want an element to overlap another element, a few things have to be true:
The overlapping element (in this case, the nav tag) needs to have position: absolute;
The parent of the overlapping element needs to have position: relative;
Fixed up JSFiddle
After a long time of trying things I still not have come any closer, I do not know how to make the menu for this website (found here) I have appear in IE7.
I am using a css image replacement technique to achieve this result, currently I have a html menu with links and am replacing the links with images in css.
Could you please help me out thank you.
Here is the CSS
'#charset "utf-8";
/* CSS Reset */
/***** main styles ******/
body {
background-image:url(images/bg-top.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#222121;
}
hr {
border : 0;
height : 2px;
background: url(images/line.png) 0 0 repeat-x;
margin : 1em 0;
}
p, h1, h2, h3, li {
font-family:Arial, Helvetica, sans-serif;
color:#b1b0b0;
}
h2 {
margin-bottom:40px;
}
h3 {
margin-top:30px;
margin-bottom:20px;
font-size:138.5%;
color:#fafafa;
text-transform:uppercase;
}
.body_text {
line-height:1.6em;
font-family: 'Arial Narrow', sans-serif;
font-size:114%;
}
input {
display:block;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #999;
border-bottom:2px solid #999;
background-color:#333;
width:200px;
margin-top:7px;
margin-bottom:10px;
}
textarea {
display:block;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #999;
border-bottom:2px solid #999;
background-color:#333;
width:300px;
height:120px;
margin-top:7px;
color:#CCC;
}
label {
color:#b1b0b0;
}
#submit {
width:100px;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #171717;
border-bottom:2px solid #171717;
color:#FFF;
}
/*** header styles ********/
#header_container {
margin:30px auto 0px auto;
width:860px;
height:110px;
background-image:url(images/line.png);
background-repeat:repeat-x;
background-position:0px 88px;
}
#menu {
position:relative;
left:527px;
top:-8px;
}
#menu li {
display:inline;
margin-right:20px;
}
#menu li.last {
display:inline;
margin-right:0px;
}
.menu_link1:link, .menu_link1:visited {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/home.png);
}
.menu_link1:active, .menu_link1:hover {
background-image:url(images/home_highlight.png);
}
.menu_link2:link, .menu_link2:visited {
display:inline-block;
text-indent:-3000px;
width:92px;
height:16px;
background-image:url(images/portfolio.png);
}
.menu_link2:hover, .menu_link2:active {
background-image:url(images/portfolio_highlight.png);
}
.menu_link3:link, .menu_link3:visited {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/blog.png);
}
.menu_link3:hover, .menu_link3:active {
background-image:url(images/blog_highlight.png);
}
.menu_link4:link, .menu_link4:visited {
display:inline-block;
text-indent:-3000px;
width:78px;
height:16px;
background-image:url(images/contact.png);
}
.menu_link4:active, .menu_link4:hover {
background-image:url(images/contact_highlight.png);
}
.active1 {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/home_highlight.png);
}
.active2 {
display:inline-block;
text-indent:-3000px;
width:92px;
height:16px;
background-image:url(images/portfolio_highlight.png);
}
.active3 {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/blog_highlight.png);
}
.active4 {
display:inline-block;
text-indent:-3000px;
width:78px;
height:16px;
background-image:url(images/contact_highlight.png);
}`
EDIT
Fixed the problem by adding font-size: 0px;
line-height: 0px; to the list-item.
But the background image is not centered and this only effects IE7
After looking through the menu with IE8's compatibility mode and its developer tools, there is an error with text-indent: -3000px; I have no idea what it is, but removing this makes your menu display as intended.