Jump to content

Need Tips About Css


activeworker

Recommended Posts

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.

Link to comment
Share on other sites

Without seeing all the code - and that is all the HTML and CSS, we can only guess. Also, you don't say what's on the other side of the lack of space around the h4 and the space around #video. There could be other things determining spacing.

 

Solely based on the code you pasted, I can only see that #video has a top margin which creates a space of 5 px to whatever comes above it, and your .mini_portfolio has padding all around, which also creates a space.

 

IDs can only be used one time per page, classes can be used more than once.

Link to comment
Share on other sites

Hi Andrea,

 

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);

}

}

)();

</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>

Edited by activeworker
Link to comment
Share on other sites

I did not take a long look. But remember the advice I gave you. This should be h4.footer-header h4 .footer-header notice the space. Do not know what it is for I just noticed the space. If you would have the tut and your code side by side, as I suggested, it makes these typos easy to find.

Link to comment
Share on other sites

Could you just upload your files somewhere and paste a link here? That way, we can see the code and what it creates with 2 clicks. It makes is so much easier to see what's going on.

 

 

Please visit this link: www dot my-portfolio-site dot site88 dot net/

 

where you we can see the code and what it creates with 2 clicks.

 

Thank you.

Link to comment
Share on other sites

Ok - I totally misunderstood your question. Here I'm looking for spaces or no spaces in your website itself, when it just dawned on me that you really were just asking about the space in that particular line of CSS - sorry about that. For that, I didn't need all your code, but as I said, I misunderstood.

 

Here is a good explanation about space or no space: http://css-tricks.com/multiple-class-id-selectors/

 

As to why both - you're simply applying two sets of formatting to this one element. Whatever is defined in your ID and also whatever the class assigns.

 

And I have no clue what you are asking here, and cannot even begin to guess:

 


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

Link to comment
Share on other sites

In the old days, we depend a lot of on developers and programmers to help update the website, even when it’s just a minor one. Thanks to the CSS and it’s flexibility, styles can be extract independently away from the codes. Now, with some basic understanding of CSS, even a novice can easily change the style of a website.

1.Use reset.css

2.Use Shorthand CSS

3.Understanding Class and ID

4.Power of <li>

5.Forget <table>, try <div>

6.CSS Debugging Tools

Edited by Andrea
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...