Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    My first css layout:
    I currently have a header with a description at the top of my page nicely centered and I like the way it looks.
    Under it I have a header2 also centered and I'd like to combine photos and some text with the text either left or right of the photos all together centered under the header.
    I also have an unordered list at the bottom that I intend on making a navagation vertically on the left.

    I have a div "container" around all of this to center it all.
    I have a div "photos" which is centered and it has a smaller width.
    I have a div "linklist" which I have given position absolute top 0 left 0.

    I have put a border on the container and photos only to see where they are.
    I'm not sure how to align text next to a group of photos.
    My linklist sits at the left of the page, but what I'm really looking for is to have it next to the container on the left.

    I've been referencing this a little: http://www.csszengarden.com/?cssfile=208/208.css
    but it seems to me the css for the zen garden is the same through all the designs so I don't think it's helping me as far as that one design goes. (nevermind - I'm now looking at the actual html and css [doh!])

    I've been referencing other css tutorials I've found on these forums but I feel like I'm stuck and don't know where to go from here.

    I guess it would be helpful to include html for what I've got so you can see what I'm talking about.
    I know it's a mess, especially with the pictures, but that's why I'm asking for help, right!?
    It could use some cleaning up. When all is said and done I plan to have pictures in place of the header and no borders.

    so, any recommendations?

    HTML Code:
    <style type="text/css">
    
    html {
        margin: 0;
        padding: 0;
    }
    
    body {
        padding: 0;
        background: url(background.png);
        background-position: top left;
        background-repeat: repeat-x;
        background-color: #fdf5e2;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
        }
     
    #container {
        border: solid thin black;
        width: 800px;
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    
    h1, h2, h3 {
        text-align: center;
    }
    
    #photos {
        width: 700px;
        border: solid thin black;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    
    }
    
    #picleft {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    #linklist {
        position: absolute;
        top: 0;
        left: 0;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
        <div id="intro"><H1>Alamo Apartments</H1>
        <p class="p1">Situated on sixteen beautifully landscaped acres, Alamo Apartments offers a variety of floor plans, amenities and reasonable rental rates to suit your housing needs. Our friendly professional on-site management team is here to serve you. We are conveniently located close to shopping, dining, schools, recreational areas and a brief fifteen minute drive north of Holloman Air Force Base.</p>
    
        <p class="p1">Amenities include a heated swimming pool, indoor Jacuzzi, fitness center, sauna, clubhouse and large barbeque areas for outdoor entertaining.</p>
    
        <p class="p1">Take a moment to view our apartment homes then contact us to reserve your new residence or to request further information.</p></div>
    
        <div id="photos"><H2>Our Community</H2>
        <p><img src="002.jpg" width="200" height="136" /> <img src="012.jpg" width="200" height="136" /> <img src="013.jpg" width="200" height="136" /></p>
    
        <p class="p2">Relax by the inviting heated pool or slip into the jacuzzi or sauna<img src="003.jpg" width="200" height="136" class="picright" /> <img src="006.jpg" width="200" height="136" class="picright" /> <img src="008.jpg" width="200" height="136" class="picright"/></p>
    
        <p class="p2"><img src="007.jpg" width="200" height="136" class="picleft" /> <img src="004.jpg" width="200" height="136" class="picleft" /> <img src="011.jpg" width="200" height="136" class="picleft" /> Plan your next party in the comfortable club house complete with a full kitchen, fireplace, and a widescreen television</p>
    
        <p class="p2">Workout in the fitness center <img src="005.jpg" width="200" height="136" class="picright" /> <img src="010.jpg" width="200" height="136" class="picright" /></p>
    
        <p><img src="009.jpg" width="200" height="136" class="picleft" /> <img src="001.jpg" width="200" height="136" class="picleft" /> Enjoy a weekend BBQ with family and friends</p></div>
    
        <div id="linklist">
        <ul>
            <li>Floorplans</li>
            <li>Contact us</li>
            </ul>
            </div>
    
            </div>
            </body>
            </html>

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Can you post your HTML code as well ?

  4. #3
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    Quote Originally Posted by Webzarus, post: 216838
    Can you post your HTML code as well ?
    This is the rest of it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Alamo Apartments</title>

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    OK, this is what is showing up... when I load the code.

    can you create an image of what you want it to look like ( doesn't have to be perfect, just something to give me an idea of what you are trying to do...

    since I don't have your images it's obviously not going to show up correctly, but if you create divs for an image holder, you can create a layout without having the images...

    I think I know what you're trying to do, but don't want to assume anything
    Attached Images Attached Images

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Part of the issue is that you have a p1 and p2 class called out in the HTML, but there are no div classes that actually define what they do ?

    You are not closing the div for the photos ( or at least I'm not seeing it ), in css every <div> must have a closing </div> , this tells the browser where to stop displaying something one way and the next div tells it what and how to display the next element.

    Seems to me I read a thread the other day that inferred that you had done this already in a table layout, but you wanted to redo it in CSS...

    can you post the table layout ( image of it is fine )... so we can see what you're trying to accomplish.

  7. #6
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    Well I gave the P1 and P2 classes because I thought I might need them. I had most of that typed out before I started working on the CSS or even had a solid plan for how it would look. I'm honestly just trying to learn how to do it at this point.
    The photos div does close. It's right at the end of the line that says "enjoy our bbq". I did count and find that all the tags are closed.

    When I posted this thread one of my problems was that the content was spilling out of the bordered area and I realized I had a height tag on there and fixed it before I actually posted this thread.

    I remember seeing a tutorial somewhere about the vertical navagation thing I want to do and I should find that and check and see if I'm missing something.

    I'll attach what I had set up using tables. I was still figuring out how I really wanted it set up so it's not really what I have in mind at this point. With the table version, that image rotated between 13 different pictures. At this point, having little content for the website, I was going to put the pictures all out on the homepage instead.
    Attached Images Attached Images

  8. #7
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    I just wanted to say that I think I figured everything out. I have the current content displaying the way I'd like it. (Although it's not perfect as far as changing font size in browser)
    I still have to get the photo situation straightened out, although I think I have a much better plan on how to make that work!
    After that I just have to make my header images and plug them in and I should be all set for now.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com