Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Dejan Buric
12,560 PointsNeed help
How to make this:
Looking like this?
I want to move About and other text up, like on 2nd screenshot is. I have tried a lot of things, splitting text and picture in 2 divs... Dont know, please help.
4 Answers
Jacob Mishkin
23,118 PointsHave you tried to wrap your text inside a div and give it a float right and a bottom margin? can you post some code so we can see your structure?
Erik Jonsberg
21,795 PointsYou posted a lot of code that doesn't have anything to do with your problem. It's difficult to figure out what's what. Please post only the relevant css and html.
My guess is that you haven't added all of your classes to your elements. Also, you want to float the image to the left and text to the right. Add some padding if it's too close to the edge.
Dejan Buric
12,560 PointsHTML
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Dejan Buric</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <div id="logo"> <a href="index.html"> <h1>Dejan Buric</h1> <h2>Designer</h2> </a> </div> <div id="navbar"> <nav> <ul> <li><a href="index.html">Portofolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> </header> <div id="wrapper"> <section> <div id="slika"> <img src="img/maturska1_rsz.jpg" alt="DejanB" id="dbslika"> </div> <div id="text"> <h3>About</h3> <p>Hi I'm Dejan Buric.</p> <p>You can add me on <a href="https://www.facebook.com/">Facebook.</a></p> </div> </section> <footer> <a href="#"> <img src="img/twitter-wrap.png"> </a> <a href="#"> <img src="img/facebook-wrap.png"> </a> <p>© 2015 Dejan Buric</p> </footer> </div> </body> </html>
CSS
GENERAL SETINGS
body { font-family: 'Open Sans', sans-serif; color: #999; }
img { max-width: 100%; }
a { text-decoration: none; }
a:visited { color: #fff; }
nav a.selected, a:hover { color: #32673f; }
ul { list-style: none; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
/ABOUT PAGE/
dbslika {
max-width: 170px;
border-radius: 100%;
margin-right: 30px;
}
slika, #text {
display: inline-block;
}
text a:visited {
color: #32673f;
}
Dejan Buric
12,560 PointsSorry i dont know why is my CSS bad in upper post.
Jacob Mishkin
23,118 PointsIts cool, just look and see if there are any back ticks or anything " ``` "
Dejan Buric
12,560 PointsThanks for answer man, i can't find solution, i will leave it like on my first screenshot. I hate positioning of elements. Hardest part for me.
P.S. Look at this please, how Nick Petit did it in tutorial, i can't understand, he just use picture in CSS. He didn't done anything to h3 (About), and p (Hi, You can...).
Dejan Buric
12,560 PointsDejan Buric
12,560 PointsI tried now, but when i float: right; the text go far on right side.
Html code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Dejan Buric</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <div id="logo"> <a href="index.html"> <h1>Dejan Buric</h1> <h2>Designer</h2> </a> </div> <div id="navbar"> <nav> <ul> <li><a href="index.html">Portofolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> <div id="wrapper"> <section> <div id="slika"> <img src="img/maturska1_rsz.jpg" alt="DejanB" id="dbslika"> </div> <div id="text"> <h3>About</h3> <p>Hi I'm Dejan Buric.</p> <p>You can add me on <a href="https://www.facebook.com/">Facebook.</a></p> </div> </section> <footer> <a href="#"> <img src="img/twitter-wrap.png"> </a> <a href="#"> <img src="img/facebook-wrap.png"> </a> <p>© 2015 Dejan Buric</p> </footer> </div> </body> </html>
CSS code:
/GENERAL SETINGS/
body { font-family: 'Open Sans', sans-serif; }
img { max-width: 100%; }
a { text-decoration: none; }
a:visited { color: #fff; }
nav a.selected, a:hover { color: #32673f; }
ul { list-style: none; }
wrapper {
}
/HEAD/
logo, #navbar {
width: 40%;}
logo {
float: left;}
navbar {
float: right;}
header { display: inline-block; width: 100%; background-color: #6ab47b; border-bottom: 5px solid #599a68; margin-bottom: 70px; }
header h1 { font-family: 'Changa One', sans-serif; padding-left: 50px; color: white; font-size: 2.5em; margin-bottom: 0; }
header h2 { padding-left: 50px; color: white; font-size: 0.85em; font-weight: 400; }
/NAVIGATION/
nav li{ display: inline-block; color: white; padding: 30px 15px 0 0; margin-right: 10px; font-weight: 800; font-size: 1.20em; }
/PORTOFOLIO PAGE/
gallery {
padding: 0;}
gallery li {
}
gallery li a p {
}
/ABOUT PAGE/
dbslika {
}
slika, #text {
display: inline-block;}
text {
float: }
/CONTACT PAGE/
/FOOTER/
footer { clear: both; text-align: center; padding-top: 55px; color: #ccc; font-size: 0.75em; }
footer img { width: 20px; height: 20px; margin: 0 5px; }
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 PointsThere is a lot of stuff in your HTML and CSS that are not apart of the issue, Its hard to go through everything can you please Show the relevant HTML and CSS please. Just looking at it as is it looks like you did not add classes to your elements such as wrapper and so on. this might be an issue.