- This topic is empty.
-
AuthorPosts
-
December 7, 2009 at 5:33 pm #27114bartlebyParticipant
Hi. I followed the screencast on going from PSD to HTML and it was great. My only problem is that I have tabs which also are a part of the rounded corners for the top portion of the page that aren’t displaying. I wish I could point you to a live site so you could better help me but all I have is the HTML CSS and the attched screenshot of what the site looks like rendered in the browser. If anyone could point me in the right direction I would be very grateful. Thanks a lot.
Code:
Blacksmith’s Fire
Praesent id justo in neque elementum ultrices. Proin mattis lacinia justo. Curabitur
justo non orci. Aliquam id dolor. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum. Suspendisse nisl.
Duis viverra diam non justo. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Quisque tincidunt scelerisque
libero. Curabitur vitae diam non enim vestibulum interdum. bibendum
ullamco laboris nisi ut aliquip ex ea commodo consequat. Quisque tincidunt scelerisque
libero. Curabitur vitae diam non enim vestibulum interdum. bibendumfooter stuff
And the CSS
Code:/*RESETS & BASIC PAGE SETUP*/
* {
margin: 0;
padding: 0;
}
html { overflow-y: scroll;}
body {
background: #eee url(images/body-bg.jpg) repeat;
font: 62.5% Palatino,”Palatino Linotype”,Georgia, serif;
color: #979797;
}
ul { list-style: none inside; }
h1 { font-size: 2em; }
p {
font-size: 1.2em;
line-height: 2em;
width: 575px;
margin-bottom: 1.2em;
}
a {
text-decoration: none;
outline: none;
}
a img {
border: none;
}
/*END RESET*/
/*STRUCTURE AND MICELLANEOUS*/
#page-wrap {
background: url(images/content-bg.jpg) repeat-y;
margin: 0 auto;
width: 979px;
}
#main-content {
padding: 30px 60px 30px 60px;
}
#header {}
#footer {
background: url(images/footer-bg.jpg) no-repeat;
min-height: 80px;
color: #aaa;
}
#footer p {
padding: 30px 60px 0 60px;
}
/*END STRUCTURE*/
/*NAVIGATION*/
ul#main-nav {}
ul#main-nav li {
display: inline;
}
ul#main-nav li a {
display: block;
text-indent: -9999px;
float: left;
height: 107px;
}
ul#main-nav li.home a {
background: url(images/nav-home.jpg) bottom center no-repeat;
width: 254px;
}
ul#main-nav li.about a {
background: url(images/nav-about.jpg) bottom center no-repeat;
width: 170;
}
ul#main-nav li.gallery a {
background: url(images/nav-gallery.jpg) bottom center no-repeat;
width: 167px;
}
ul#main-nav li.recent-work a {
background: url(images/nav-work.jpg) bottom center no-repeat;
width: 169px;
}
ul#main-nav li.contact a {
background: url(images/nav-contact.jpg) bottom center no-repeat;
width: 206px;
}
ul#main-nav li a:hover {
background-position: top center;
}/*END NAVIGATION*/
December 8, 2009 at 3:56 am #67789AshtonSandersParticipantHi Bartly, I don’t see tabs at all.
Could you post an image of what it’s supposed to look like?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.