Need Tips About CSS

HTML & CSS
1

Hi Everybody,

Good day
Please see the following codes and response:

h4.footer-header{
background: transparent url(images/footer-header.png) no-repeat;
line-height: 58px;
text-indent: 30px;
}

video .play{
float:right;
margin-top:5px;
}

.mini_portfolio_item .block_inside {
background:none; background-color:#e2dddc;
padding:25px 30px 15px 30px;
}

Why there has no gap/space between h4.footer-header?
But why there has a gap/space between video .play”?
Why “id (#)” and “class (.)” both use here?

.mini_portfolio_item .block_inside
Whether both class (.) is active here or not?

No more, I am waiting for your kind response.

Thank you. :slight_smile:

2

Hi,

That CSS is meaningless without the HTML it goes with. Please post an example page with the HTML and CSS together. Here’s a template you can use:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">

[I][COLOR="#FF0000"]your CSS here[/COLOR][/I]

</style>
	
</head>
<body>

[I][COLOR="#FF0000"]your HTML here[/COLOR][/I]

</body>
</html>
3

I am happy to say that I have already fixed this problem as well. But thank you so much for that template where I can post HTML and CSS together. I will follow your advice in future.

I am very glad that you spent your valuable time to reply my topics. Thank you again.

I like to inform you that still I don’t know how to use code template like you. Can you or anybody tell me how to use it?

4

O, quite easy. Just create a .html file with your code editor (a regular web page). Paste that template code into it, and place your HTML and CSS where indicated, and save. Then open that file in your browser.

That’s why it’s so much easier if people post their code here like that. Then we can quickly test it in our own browser.

5

Hi ralph.m,

I am very glad that you spent your valuable time to reply my topics.

I am very happy to share my CSS and HTML code with you. Please see the code:


My CSS here:

@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END RESET */

body{
    background:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    text-align:justify;
}

#wrapper{
    width:960px;
    margin:0 auto;
}

/* FONT STYLES */
h3{
    font-size:24px;
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    margin-bottom:25px;
}
h4{
    margin-bottom:25px;
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
}

h5{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
}
p{
    font-size:13px;
    color:#555;
    line-height:18px;
}
a, a:link, a:visited{
    text-decoration:none;
    outline:none;
}

.green{
    color:#fff;
}

.white{
    color:#fff;
}
strong{
    font-weight:bold;
}
/* END FONTS STYLES */

/* HEADER */
#header-wrap{
    border-top:10px solid #4d9543;
    padding-top:40px;
}
header{
    width:960px;
    margin:0 auto;
    padding: 0;
}
header h2 a{
    display:block;
    text-indent:-999999px;
    background:url(images/logo.png) no-repeat;
    width:214px;
    height:77px;
    float:left;
    margin-bottom:40px;
}
#call{
    float:right;
    border-right:1px solid #c8c8c8;
    padding-right:25px;
    margin-top:20px;
}
#call h3{
    margin:0;
}
#call h4{
    text-align: right;
    margin: 0px;
    color: #093;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
nav{
    clear:both;
    width:960px;
    height:50px;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    background-color:#3b7c33;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
    background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
    /* IE 10+ */
    background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
    border: 1px solid #336c2b;
}

nav ul li{
    float:left;
    border-right:1px solid #336c2b;
    border-left:1px solid #78c368;
}
nav ul li.home{
    border-left:none;
    text-indent:-9999px;
    background:url(images/home.png) no-repeat 50% 50%;
}
nav ul li.last{
    border-left:none;
    border-right:none;
    float:right;
    margin-right:20px;
}
nav ul li a{
    display:block;
    padding:0 30px;
    height:50px;
    line-height:50px;
    font-size:15px;
    color:#fff;
    text-shadow:0 1px 0 #387031;
    /* text-shadow: h-shadow v-shadow blur color; */
}
nav ul li a:hover{
    background:#5fae53;
}
nav ul li.home a:hover{
    border-bottom-left-radius:30px;
    -moz-border-bottom-left-radius:30px;
    -webkit-border-bottom-left-radius:30px;
    border-top-left-radius:30px;
    -moz-border-top-left-radius:30px;
    -webkit-border-top-left-radius:30px;
    background:#5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li div input[type=text]{
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    background:#4b9241;
    border-left:none;
    border-right:none;
    border-bottom:1px solid #5ead52;
    border-top:1px solid #346d2c;
    color:#fff;
    text-shadow:0 1px 0 #387031;
    padding:5px 0 5px 20px;
    width:200px;
}
nav ul li div input[type=text]:focus{
    outline:none;
}

/* TO STYLE PLACE HOLDER */
::-webkit-input-placeholder{
    color:#fff;
}

nav ul li div input[type=submit]{
    background:url(images/search.png) no-repeat 50% 50%;
    border:none;
    text-indent:-999999px;
    margin-left:15px;
    height:50px;
    width:16px;
}
/* END HEADER */


/* START CONTAINER AND SLIDES */
#container{
    width:960px;
    margin:0 auto;
    
}

/* SLIDES */
#slides{
position:relative;
margin-top:40px;
}
.slides_container{
height:315px;
}
.slide-right{
position:absolute;
top:0;
left:385px;
}

.slide-heading{
background: url(images/slide-heading.png) no-repeat;
width:494px;
height:68px;
color:#fff;
font-size:24px;
padding-top:20px;
padding-left:80px;
margin-top:35px;
margin-bottom:30px;
}
.slide-right .info{
width:395px;
margin-bottom:20px;
margin-left:155px;
}
.slide-right .readmore{
margin-left:155px;
}
.readmore{
font-style:italic;
text-decoration:none;
color:#509743;
padding-left:15px;
background:url(images/more.png) no-repeat 0 50%;
}
.readmore:hover{
color:#c8c8c8;
}
.pagination{
position:absolute;
bottom:25px;
left:25px;
z-index:99;
}

ul.pagination{
position:absolute;
bottom:25px;
left:25px;
z-index:99;
}
ul.pagination li{
float:left;
margin-right:10px;
background:url(images/pagination.png) no-repeat;
background-position:top;
width:14px;
height:15px;
}
ul.pagination li.current{
background-position:bottom;
}
ul.pagination li a{
display:block;
text-indent:-9999px;
}

a.next{
position:absolute;
right:25px;
bottom:30px;
display:block;
width:7px;
height:13px;
background:transparent url(images/prev-next.png) no-repeat;
background-position:top right;
text-indent:-9999px;
}
a.prev{
position:absolute;
right:50px;
bottom:30px;
display:block;
width:7px;
height:13px;
background: transparent url(images/prev-next.png) no-repeat;
background-position:top left;
text-indent:-9999px;
}
a.next:hover{
background-position:bottom right;
}
a.prev:hover{
background-position:bottom left;
}
/* END SLIDES */
    

#info{
    position: relative;
    top: -235px;
    float: right;
    padding-left: 30px;
    padding-right: 30px;
    width: 385px;
    color: #000000;
}
#info p{
    width:260px;
    margin-bottom:20px;
}

.readmore{
    margin-bottom:20px;
    margin-left:100px;
    font-style:italic;
    text-decoration:none;
    color:#509743;
    padding-left:15px;
    background:url(images/more.png) no-repeat 0 50%;
    
}
.readmore:hover{
    color:#c8c8c8;
}

/* END CONTAINER AND SLIDE */

/* SERVICE */    
#service{
    background:url(images/service-bg.jpg) no-repeat;
    margin:50px auto;
    width:960px;
    height:253px;
    padding-top:30px;
}

#web{
    position:relative;
    top:-25px;
    float:left;
    width:450px;
    padding-left:30px;
}
#web p{
    width: 260px;
    margin-bottom: 20px;
    color: #000;
}
#web img{
    float:right;
    margin-right:50px;
}


#vector{
    float:right;
    width:450px;
    padding-left:30px;
    margin-right:-40px;
    position:relative;
    top:-320px;
    
}

#vector p{
    width: 260px;
    margin-bottom: 20px;
    color: #000;
}
#vector img{
    float:right;
    margin-right:50px;
}
/* END SERVICE */

/* MEDIA */
#media{
margin:0 auto;
}
#video{
width:302px;
padding-top:20px;
float:left;
margin-right:58px;
background:transparent url(images/video-bg.png) no-repeat;
height:225px;
}
#video h4{
margin:0;
}
#video h4, #video h5{
text-align:center;
color:#fff;
text-shadow:0 1px 0 #387031;
}
#video .play{
float:right;
margin-top:5px;
}

#twitter{
position:relative;
top:-182px;
width:285px;
height:180px;
float:left;
margin-right:30px;
background: transparent url(images/twitter-bg.png) no-repeat;
background-position:bottom;
padding:0 0 20px 0;
}
#twitter p{
padding:0 20px;
}
#twitter .time{
font-size:11px;
color:#999;
margin-top:15px;
}

a.t-link{color:#6767c9; text-decoration:none;}
a.t-link:hover{text-decoration:underline;}

#facebook{
width:285px;
float:right;
position:relative;
top:-182px;
}
/* END MEDIA */

/* WIDGET */

#footer-wrap{
    padding: 160px 0;
    background: #333333 url(images/widget-bg.jpg);
    position:relative;
    top:250px;
    
}

#footer{
    width: 960px;
    margin: 0 auto;
}
h4.footer-header{
    background: transparent url(images/footer-header.png) no-repeat;
    line-height: 58px;
    text-indent: 30px;
}
#links{
    width: 225px;
    float: left;
    margin-right: 75px;
    position:relative;
    top:-330px;
}
#links ul{
    list-style-image: url(images/links.png);
    margin-left: 15px;
}
#links ul li a{
    color: #cccccc;
    font-size: 13px;
    padding: 8px 0;
    display: block;
}
#links ul li a:hover{
    color: #fff;
}
#blog{
    position: relative;
    top:-330px;
    width: 290px;
    float: left;
    margin-right: 75px;
}
#blog img{
    position: absolute; 
    top: 50px;
    left: -18px;
}
#blog p.title{
    color: #fff;
    margin-left: 110px;
    margin-bottom: 15px;
}
#blog p.date{
    margin-left: 110px;
    color: #cccccc;
    font-style: italic;
    font-size: 11px;
    margin-bottom: 15px;
}

#blog a.readmore{
    margin-left: 110px;
}
#location{
    position: relative;
    top:-330px;
    width: 290px;
    float: right;
}
#location img{
    position: absolute; 
    top: 45px;
    left: 22px;
}
#location p.address{
    margin-top: 115px;
    border-right: 1px solid #484848;
    padding-right: 20px;
    text-align: right;
    color: #cccccc;
}

.owner{
color:#fff;
text-align:center;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-top:20px;
position:relative;
right:365px;
}


#icon{
float:right;
position:relative;
left:250px;
bottom:300px;
}



/* END FOOTER */















My HTML here:

<!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>Welcome to My Portfolio Website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.green1 {
    color: #509743;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
}

.style1 {
    color: #999;
    font-size: 11px;
    font-style: italic;
}
.style2 {
    font-size: 14px;
    color: #fff;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>


<script>
        $(function(){
            $('#slides').slides({
                preload: true,
                generateNextPrev: true,
            });
        });
</script>

    
    <!--[if IE]>
    <script type="text/javascript">
    (function(){
    var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
    for(var i = 0; i < html5elmeents.length; i++){
    document.createElement(html5elmeents[i]);
    }
    }
   &nbsp;)();
    </script>
    <![endif]-->
    
    
    
</head>


<body>


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div id="header-wrap">
</div>
<div id="wrapper">

<header class="group">
<h2><a href="index.html" title="burnstudio">Burnstudio</a></h2>
<div id="call">
<h3>(012) 345 6789</h3>
<h4>Call us <strong>now</strong><span class="green"><b>w</b></span></h4>
</div><!-- end call -->
<nav class="group">
<ul>
<li class="home"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Services</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Testimonials</a></li>
<li class="last">
<div>
<input type="text" name="search" placeholder="search" />
<input type="submit" name="search" value="go" class="search" />
</div>
</li>
</ul>
</nav>
</header>





<!-- START SLIDES CONTAINER -->

<div id="slides">
<div class="slides_container">

<div>

 <img src="images/slide1.png" alt="slide1" />
 
 <div class="slide-right">
 <h1 align="left" class="slide-heading">Thanks for visit 1st Time To My Latest Portfolio Website.</h1>
 <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
 
<p><a href="#" class="readmore">read more</a></p>
</div>
</div>


<div>

 <img src="images/slide1.png" alt="slide1" />
 
 <div class="slide-right">
 <h1 align="left" class="slide-heading">Thanks for visit 2nd Time To My Latest Portfolio Website.</h1>
 <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
 
<p><a href="#" class="readmore">read more</a></p>
</div>
</div>

<div>

 <img src="images/slide1.png" alt="slide1" />
 
 <div class="slide-right">
 <h1 align="left" class="slide-heading">Thanks for visit 3rd Time To My Latest Portfolio Website.</h1>
 <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
 
<p><a href="#" class="readmore">read more</a></p>
</div>
</div>

</div><!-- end slies container -->
</div><!-- end slides -->


<!-- END SLIDES CONTAINER -->

<!--START SERVICE-->
<div id="service">

<div id="web">
<img src="images/web.png" />
<h3>Web <span class="green1"><b>Design</b></span></h3>
<p>Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.</p>
<p><a href="#" class="readmore">read more</a></p>
</div>
</div>


<!-- END WEB -->

<div id="vector">
<img src="images/vector.png" />
<h3>Vector <span class="green1"><b>Design</b></span></h3>
<p>Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.</p>
<p><a href="#" class="readmore">read more</a></p>
</div>

<!-- END SERVICE -->

<!-- START MEDIA -->
<div id="media" class="group">
<div id="video">
<h4>Quick <strong>Video Tour</strong></h4>
<h5>How we Design our works!</h5>
<a href="#" class="play"><img src="images/play.png" alt="play" /></a>
</div>

<div id="twitter">
<h4>Twitter <strong><span class="green1">Feed</span></strong></h4>
<p class="tweet">Mashable Video: Principal Resigns After Allegedly Posing as a Student on Facebook -<a href="#" class="t-link">http://on.mash.to/IVYWYJ</a></p>
<br />
<p class="style1">9 hours ago</p>
</div>

<div id="facebook">
<h4>Like Us On <strong><span class="green1">Facebook</span></strong></h4>


</div>
</div><!-- END MIDEA -->
</div>



<!-- START WIDGET -->

<div id="footer-wrap" class="group">
        <div id="footer">
            <div id="links" class="group">
                <h4 class="white">Other <strong>Links</strong></h4>
                <ul>
                    <li><a href="#">www.example.com</a></li>
                    <li><a href="http://www.1stwebdesigner.com">www.1stwebdesigner.com</a></li>
                    <li><a href="http://www.labzip.com">www.labzip.com</a></li>
                    <li><a href="#">www.samplelink.com</a></li>
                    <li><a href="#">www.outgoinglink.com</a></li>
                    <li><a href="#">www.link.com</a></li>
                </ul>
            </div>
            
            <div id="blog">
                <h4 class="footer-header white">Latest From The <strong>Blog</strong></h4>
                <img src="images/blog.png" alt="blog" />
                <p class="title">Maecenas iaculis lorem vel dui vulputate non consequat mi congue.</p>
                <p class="date">05.30.2012</p>
                <p><a href="#" class="readmore">read more</a></p>
            </div><!-- end blog -->
            
            <div id="location">
                <h4 class="footer-header white">Our <strong>Location</strong></h4>
                <img src="images/map.png" alt="map" />
                <p class="address">123 unknown street, address 
                </br> 6600 Pabna, Bangladesh</p>
                
<div class="owner">Created by@ Foysal & Salam</div>
                
                    
</div><!-- end location -->

<div id="icon">
<p><span class="style2"><strong>Follow me </strong></span><a href="http://www.facebook.com/foysal.bony.7?ref=tn_tnmn"><img src="images/facebook.png" width="25" height="25" /></a>
<a href="#"><img src="images/twitter.png" width="25" height="25" /></a>
<a href="#"><img src="images/linkedin.png" width="25" height="25" /></a></p>
</div>
            
</div><!-- end widget -->
        
</div> 
<!--! end widget-wrap -->



</body>
</html>
6

Hm, you missed the point of that little template I posted. The point of it is to take the relevant parts of your code and stick them in where the red bits are. That is, paste the CSS where your CSS here and take anything between your <body> </body> tags and place it where it says your HTML here. Sorry it wasn’t clear. Of course, if there is any JS on the page that’s needed in the test page, you can place that in the template as well, in the same position it appeared in the original template.

What we are doing here is creating a new page for testing the relevant parts of your code. Before posting it, make sure to test it yourself, to ensure that it demonstrates the problem that needs fixing. E.g. paste the code you are posting here into a .html file, double click it and see what happens when it opens in you browser…