- This topic is empty.
-
AuthorPosts
-
March 8, 2014 at 10:29 pm #165170yjo086Participant
I am pretty new with CSS so I ask for everyone’s understanding and patience. I’m trying to create a portfolio site and I want to add thumbnail images to showcase my work, but when I add an image, the pink background stops extending to the bottom of the page.
Here’s my link to codepen, so that you can see how I want the site to look, I hope I did this right:
http://codepen.io/yjo086/pen/dJuAbThanks in advance!
March 9, 2014 at 6:15 am #165184AtelierbramParticipantThere are some issues with the underlying HTML and CSS structure of the layout.
When you would use some kind of ‘grid system’ for this layout, ( with some adapted HTML markup, and CSS styles ) then you probably won’t need theabsolute
positioned element with the background-color.
Another issue are the sizes of the images. Right now they are oversized to force a layout, but really should be the other way around: width of the parent (grid-wrapperdiv
) should define the width of the image ( byimg { max-width: 100%; }
in theCSS
).March 9, 2014 at 2:47 pm #165213yjo086Participant@Aterlierbram: So you are saying that I need to structure the layout of the site a little better and that my images are too big? If so, cool. I’ll definitely check out the tutorial you have given me. Thanks a lot. I’ll get this by God, or die tryin’! LOL
March 9, 2014 at 3:10 pm #165215AtelierbramParticipant@yjo086 You’re welcome.
So you are saying that I need to structure the layout of the site a little better and that my images are too big?
I get that you are a visual thinker, so take your time to check out the code that is in my fork of your codepen
I’ll definitely check out the tutorial you have given me.
but don’t forget there’s also tons of good books out there on HTML and CSS.
Good Luck.
March 9, 2014 at 6:46 pm #165222yjo086Participant@Atelierbram: Yea, I am very visual (T_T), I find it a curse sometimes…ok, well it seems like I need to take a set back for a second so that I can try and understand layout and positioning, but thank you for bringing it to my attention and for your efforts. I do have some books and I plan on getting more, its hard finding books for noobs like me to understand.
If I may ask, how come you put some elements as both an id and a class? For example:
div id=”logo” class=”logo”
Does this just make it more organized to code?
March 10, 2014 at 2:12 am #165239AtelierbramParticipant<div id=”logo” class=”logo”>
Has to do with the habit I got into of only using classes in
CSS
, which makes it easier to override declarations done earlier in the stylesheet; (in the abstract: trying to prevent a specificity battle by having selectors of the same specificity weight).
I also like to put multiple classes on an element to be able to be more flexible and terse in theCSS
( being a fan of Nicole Sullivan on the subject ). Most important thing is that one wraps ones head around the concept of specificity inCSS
.March 10, 2014 at 1:46 pm #165321yjo086ParticipantI see, that makes sense.
As far as my original question, I did look at the code you redid, but I’ll be honest, I’m not quite understanding what you did. You said previously:
When you would use some kind of ‘grid system’ for this layout, ( with some adapted HTML markup, and CSS styles ) then you probably won’t need the absolute positioned element with the background-color.
I did download the 960 grid system and I’m thinking maybe a 12 column grid would suffice for the design i have, I started it like this for the HTML:
<!doctype html>
<html>
<head>
<link href=’fonts.googleapis.com/css?family=League+Script’ rel=’stylesheet’ type=’text/css’>
<link href=’fonts.googleapis.com/css?family=Bitter’ rel=’stylesheet’ type=’text/css’>
<link href=’fonts.googleapis.com/css?family=Droid+Serif’ rel=’stylesheet’ type=’text/css’>
<meta charset=”utf-8″>
<title>Owens Designs</title>
<link rel=”stylesheet” type=”text/css” href=”960gs/code/reset.css” />
<link rel=”stylesheet” type=”text/css” href=”960gs/code/960_12_col.css” />
<link rel=”stylesheet” href=”owensdesign2.css”>
</head>
<body><
div>
<div> <div> <img src="https://dl.dropboxusercontent.com/s/yz7kvfmlf812dzf/brandlogoresizedverticalsmall.png" /> </div> <div> <ul id="nav" width="60px"> <li><a href="">About</a></li> <li><a href="">Work</a></li> <li><a href="">Contact</a></li>
</div>
</body>
</html>And the CSS for this is:
.header{text-align: center;
}#logo{padding-top: 40px;
}#nav li{list-style-type: none;
padding: 20px;
display: inline;
font-family: Geneva;
}#nav{padding-top: 10px;
}Am I doing this correctly? Cause now I can’t move the navigation links to the center underneath my logo…sigh…now I’m getting frustrated.
March 10, 2014 at 5:27 pm #165328AtelierbramParticipantYou could really help me help you, by also making this grid exercise into a Codepen.
Key is trying to understand this direct relationship beween HTML markup, and CSS style declarations of those elements, there’s no magic involved. For example: you will have to put some of those class names of that 960-grid on some of those
div
s , in order for it to work.You could also make a copy of this demo, study it, play with it, and adapt it to your liking.
But there is a lot to all this, and it takes time, for anyone, for it to really sink in.
March 10, 2014 at 6:21 pm #165329yjo086ParticipantI’ve actually begun playing around more with the 960 grid, watched some demos and I have begun incorporating my css into the grid and its looking good so far. I kind of starting over so right now my navigation links are not horizontal, so I’m trying to figure that out.
I’m just eager to make my portfolio as cool as possible and its a little hard particularly since I’m basically teaching myself with little help elsewhere. But you’re right, it just takes time.
I’ll do the demo like you suggest and I’ll try to put it in Codepen here in forum so that maybe someone can check my code. Til then, thanks again for your time and patience.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.