- This topic is empty.
-
AuthorPosts
-
July 12, 2013 at 9:24 pm #46377Caleñ0Member
Hey everyone,
I am new to the DIY coding part of design, and I humbly come to you for help and/or advice.
I am starting a test site, and decided to go with a template. It will most likely change many times over before anything is published, as it’s simply a platform to play and learn.
I’ve hit my first snag, however, and its much earlier than I expected, and much more frustrating because of it.
I am trying to use two different patterned images on two different divs. One div is the background, and then another one on a sidebar div. However, only the background color is showing on both, the background images don’t show on either.
Any and ALL help is appreciated.The HTML:
body {
background:#195f88;
background-image: url(images/pattern1.jpg);
font-size:14px
}
div#wrap {
width:980px;
position:relative;
margin:0 auto!important
}
div#sidebar {
width:220px;
height:100%;
float:left;
background:#2c2c2c;
background-image: url(images/pattern2.png)
border-right:1px solid #2e2f2f;
position:fixed
}
a#logo {
text-align:center;
display:block;
border-bottom:1px solid #353535;
width:100%;
position:relative;
z-index:999;
opacity:1;
-webkit-transition:all 300ms;
-moz-transition:all 300ms;
-o-transition:all 300ms;
transition:all 300ms;
padding: 15px 0 9px 0;
}* And I can’t seem to get my CodePen CSS code to work. I triple-apologize for the noob mess.
The result in CodePen:
[“CodePen”](http://codepen.io/anon/details/vItzK)I’m not sure if I can offer any more info. but please let me know if anymore is needed to spot the problem.
Thank you in advance.
July 12, 2013 at 11:54 pm #142647jurotekParticipantDo you have web-host set up?
July 13, 2013 at 2:03 am #142654Paulie_DMemberThe code in Codepen is incomplete.
My guess however is that this is the result of not clearing a float.
July 13, 2013 at 10:06 am #142660Caleñ0Member@jurotek
Yeah…it’s already up on a test server. Here: [TEST1](http://x3nbox.uberserver.org/TEST4/)
@Paulie_D
I’m familiar with the concept, but I’ve yet to actually do it, and so I’m unsure about results. Although I am doing my reading on the pros and cons, but it’s very abstract, even with examples. I would appreciate ANY help or advice you have, man.July 13, 2013 at 10:08 am #142671Paulie_DMemberJuly 13, 2013 at 10:37 am #142672jurotekParticipantThis is strange. Don’t know why it doesn’t work with relative URL but it does work with this
body {
background-image: url(‘http://x3nbox.uberserver.org/TEST4/images/pattern1.jpg’);
font-size:14px
}July 13, 2013 at 10:41 am #142673Paulie_DMemberA missing `/` in the link possibly?
July 13, 2013 at 10:44 am #142674jurotekParticipantok, here you go
body {
background-image: url(‘/TEST4/images/pattern1.jpg’);
font-size:14px
}July 13, 2013 at 10:47 am #142675jurotekParticipantBTW, add this also
background-attachment:fixed;
to prevent background scroll
July 13, 2013 at 12:32 pm #142677Caleñ0MemberYeah, that seems to have worked. Thank you so much, folk!
Jurotek, I will be checking the link you provided for a little home-schooling while I experiment with the rest of the site.I was curious about adding texture to the menu sidebar, as well. A similar pattern, but likewise, a lighter tone. That is why included it (with messy results in CodePen), before. However, I tried including the URL in similar fashion (background-image property) to the div#sidebar { but that turned out to _completely_ eliminate the navigation menu. Any thought on why this happens?
And once again, thank you for all your help so far.
July 13, 2013 at 12:51 pm #142679jurotekParticipant@Caleñ0, that wasn’t me who provided link it was @Paulie_D. I have to run now. Going to Death Ride (100 Mile bike race in Sierras to support my buddy) I’ll get back to you later on. My concern also is how inefficient your CSS is with too many overqualified elements and too much redundancy throughout. See ya later.
July 13, 2013 at 5:51 pm #142701Caleñ0MemberDamm, I’m sorry. All credit where it’s due. Thank _you_ very much and my apologies, Paulie_D.
@jurotek
I thank you for the observation on the code. Like I said, I picked up a template that I’m using and dissecting as a starting point on where I want to take my future site. Right now, I’m in no position to see the shortcomings on the code, but I do hope to understand the best practices. Even though my approach to learning this stuff might not be the most logical or organized. Trial and error gives me a clearer picture of how to operate.
Matter of fact, I created a CodePen account and have been playing around with the code a bit. It was then that I noticed I might have left a simple apostrophe out, (‘/TEST4/images/…) because when I used the Absolute path, the pattern worked just fine on the div. I went back to my own code and used the Relative version, and sure enough it worked. It looks bad as a design… but it worked.So, on the subject of redundancy…why is there a need for a font-size:14px as a property on a background?
July 13, 2013 at 10:16 pm #142710jurotekParticipant@Caleñ0, 14px it’s not property of background. That’s your base font size. I normally set it to 100% which at browser default would be 16px. This cascades down to every element text till you overwrite it. I get back to you tomorrow morning and give you some examples of efficient CSS and how it can be applied in your template. Right now I am not in to it at all. Too tired being under the sun all day. In the mean time you can Google with keywords like: Efficient CSS, How to write efficient CSS. And also learn about cascade and inheritance.
July 14, 2013 at 7:07 am #142737jurotekParticipantExample of cascade and inheritance to minimize redundancy.
You have 10 instances of text-decoration:none and 6 instances of transition. Box sizing should be applied to all elements instead of just some. Than this would do.*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
Pseudo Elements
*/
a {color:text-decoration: none;}
a:hover {
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
transition:all 0.2s ease;
}You have 5 instances where your content appears in some kind of grid and each instance have separate css mark up for each instead of just making one grid with some classes to handle all. Obviously you have to add your own styling to fit your needs.
/*
My Grid
*/
.grid {overflow:hidden;}
.box {float:left;}/*
My Grid Classes
*/
.about {your styles} for stuff bellow your slider
.portfolio {your styles} for portfolio
.skills {your styles} for skills
.industries {your styles} for industries
.clients {your styles} for clientsJuly 14, 2013 at 7:10 am #142738jurotekParticipantExample of HTML let’s say for Skills section
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.