- This topic is empty.
-
AuthorPosts
-
October 11, 2009 at 5:22 pm #26416
redhare
Memberhere is my test site.. test.reef-solutions.com/index.html
this is what i’m trying to achieve
generic mock up of the layout
[img]http://i729.photobucket.com/albums/ww291/bluenassarius2/sitedesign.jpg[/img]October 11, 2009 at 5:23 pm #65289October 11, 2009 at 5:28 pm #65290redhare
Memberdo i attack this by
making a div for the very top section register, login?
make a div for the site logo/advertisement?
make a div for navigation menu?make a div that will contain with 2 div’s.. 1 to store slider, ebay, and the other to store featured give away and local events?
that is what i’m thinking. can someone help me find the light to make this happen?
October 12, 2009 at 2:08 am #65316AshtonSanders
Participant"redhare" wrote:do i attack this bymaking a div for the very top section register, login?
make a div for the site logo/advertisement?
make a div for navigation menu?Lucky for you, that’s kind of like asking what section of a car to start washing; front or back? There’s millions of ways to create this layout, and the only "that’s wrong" you’ll hear is if it doesn’t work in all browsers.
That being said, here’s my basic thoughts:
Create and style divs for all of the biggest rectangles on the page. (header, leftcontent, rightcontent)
Inside those main divs, create the smaller sections…. repeat until everything is in it’s place.October 12, 2009 at 3:45 pm #65341TLaude
MemberHere is how I would do the markup of the div’s.
Code:
As you can see, it’s very simple. There are many, many ways you could go about doing this. Just look at your picture, and put it into div’s. Remember, use the HTML for the markup, and rely on your CSS to give your page the "looks".
October 13, 2009 at 2:41 am #65394soap
ParticipantTypically you want to build from top to bottom, left to right.
Unless you’re doing weird positioning things, which you aren’t.
October 13, 2009 at 2:47 am #65395redhare
Memberthanks for all the support guys. i worked on the code and it looks normal now.. i haven’t upped it to my site yet. i’ll do it after it starts to take shape.
i’m thinking of combining all the stuff on the left side in one and the right as a side bar? what do you guys think?
October 13, 2009 at 4:16 am #65397dsbente
Memberthanks for that…
those pointers are highly appreciated…as a beginner, got something to ask related to this…
how can i work on a particular design where it will fit on both 1024×786 and the size of a laptop screen that the position won’t be affected?
October 13, 2009 at 12:47 pm #65406redhare
Memberi made the 4 boxes under the header float left, now the footer won’t show. i’m not sure how to remedy this. can someone take a look? test.reef-solutions.com
October 13, 2009 at 12:54 pm #65407TLaude
MemberI don’t think you will want to make the right boxes float: left.
Post the current CSS & HTML Markup you have so we can point you in the right direction.
October 13, 2009 at 1:00 pm #65409redhare
MemberCode:log inlogo goes hereCode:/*
Reef-Solutions CSS Document
by Sam Tran
http://www.reef-solutions.com
*//*—– global styles —–*/
body {
margin: 0;
padding: 0;}
p, h1, h2, h3, h4, h5, h6, li {
margin: 1ex 1em;
}div#outerDiv {
position: relative;
width: 1024px;
margin: 0 auto;
background-color:#dfdfdf;
}div#regbar {
height: 15px;
background-color:black;}
div#header {
height: 150px;
background-color:#164a4d;
}div#leaderAD {
height: 75px;
width: 468px;
background-color:brown;
margin: 20px 15px 0 0;
}div#glider {
height: 400px;
width: 600px;
background-color:black;
float: left;
}div#forumpromo {
height: 400px;
width: 424px;
background-color:blue;
float: left;
}div#ebay {
height: 400px;
width: 600px;
background-color:pink;
float: left;
}div#caption {
height: 400px;
width: 424px;
background-color:grey;
float: left;
}div#footer {
height: 250px;
width: 1024px;
background-color:black;
}October 13, 2009 at 5:30 pm #65420redhare
Memberthats corrected but i still don’t see the footer
October 13, 2009 at 5:41 pm #65421TLaude
MemberTwo things I noticed.
1. Your not closing your outerDiv div section.
2. If you ‘float: left’ your footer it will work.October 13, 2009 at 6:15 pm #65422redhare
Memberfloat left on which parts?
October 13, 2009 at 6:17 pm #65423redhare
MemberCode:
Reef-Solutions
log inlogo goes here
AuthorPosts- The forum ‘CSS’ is closed to new topics and replies.