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 6 of 6
  1. #1
    Member Overlord's Avatar
    Join Date
    May 2011
    Location
    Prijedor
    Posts
    86
    Member #
    27819
    Liked
    2 times
    I'm not so good at English so I will try to make myself clear...If you watch this two pictures you will see what text I want to make(Its marked with red rectangle)...I tried to use padding but nothing..I could use normal positioning(absolute) but then some people wouldn't have the same design as I...text would be on different place...
    This is how it looks like when I code it

    Do you see text that is marked with red rectangle?Its going under first text but I want it to look like this.

    I can create one paragraph and create columns but that's not what I want...any advice?
    Owner of Visual Studio

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I suspect you have the order of your divs a bit wrong - and you will also probably need a "clear" div
    Why are you creating columns when you don't want them?
    What code editor are you using?
    Is the site live online? Can you post a link so we can see your code?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Member Overlord's Avatar
    Join Date
    May 2011
    Location
    Prijedor
    Posts
    86
    Member #
    27819
    Liked
    2 times
    I'm using Notepad++
    Site isn't live online but I will give you code
    HTML Code:
    <html>
    <body>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Business HTML template</title>
    </head>
    <div id="header"><img src="img/logo.png" class="logo"/>
    <ul id="nav">
        <li><a href="#">Pocetna</a></li>
        <li><a href="#">Muzika</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Galerija</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Kontakt</a></li>
    
    </ul></div>
    <br />
    <div id="slide"><img src="img/sig.jpg" class="slika"/>
    <img src="img/play.png" class="s"/>
    <img src="img/play1.png" class="s1"/></div>
    
    <br />
    <div id="tekst">
    <div class="tks"><h1>Dobrodosli na stranicu</h1>
    <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis tristique pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ac justo lorem, viverra ornare risus. In hac habitasse platea dictumst. Cras hendrerit viverra sem vitae euismod. Maecenas non purus at turpis suscipit luctus. Quisque a viverra ipsum. Donec sollicitudin fringilla turpis, in iaculis nisi lacinia vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas at est nunc. Proin porttitor turpis vel neque tincidunt tempor. Aenean sed massa nec augue adipiscing dapibus.</p1></div></div>
    <br />
    <div id="tekst1"><div class="t"><img src="img/home.png"/>Integer aliquam luctus felis. Ut non placerat enim. Fusce id iaculis orci. Mauris rutrum blandit ipsum, ac semper lorem cursus in. Curabitur feugiat, quam quis fringilla egestas, dui diam facilisis nulla, quis ullamcorper neque felis a nisi. Suspendisse facilisis augue et massa aliquam iaculis. Integer id molestie nisi.</div>
    <div class="t"><img src="img/home.png"/>Integer aliquam luctus felis. Ut non placerat enim. Fusce id iaculis orci. Mauris rutrum blandit ipsum, ac semper lorem cursus in. Curabitur feugiat, quam quis fringilla egestas, dui diam facilisis nulla, quis ullamcorper neque felis a nisi. Suspendisse facilisis augue et massa aliquam iaculis. Integer id molestie nisi.</div></div>
    <div id="kontakt"></div>
    <div id="footer"></div>
    </body>
    </html>
    Code:
    body
    {
    background-color:#e8e9e7;
    margin:0px;
    padding:0px;
    }
    #header
    {
    background: url(img/hbg.jpg);
    height:113px;
    width:100%;
    }
    #slide
    {
    background-color:#6c6c65;
    height:150px;
    width:700px;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    margin-left:auto;
    margin-right:auto;
    }
    img.slika
    {
    padding-top:10px;
    padding-right:0px;
    padding-left:100px;
    margin-left:auto;
    margin-right:auto;
    }
    
    img.s
    {
    position:absolute;
    top:190px;
    right:300px;
    }
    img.s1
    {
    position:absolute;
    top:190px;
    left:300px;
    }
    #tekst
    {
    background-color:#fefefe;
    width:700px;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    margin-left:auto;
    margin-right:auto;
    }
    .tks h1
    {
    color:#797979;
    font-family:Arial;
    font-size:18px;
    }
    .tks p1
    {
    color:#797979;
    font-family:Arial;
    font-size:14px;
    }
    #tekst1
    {
    background-color:#d9d7d0;
    height:auto;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }
    .t
    {
    width:300px;
    padding-left:50px;
    font-family:georgia;
    }
    .t1
    {
    width:300px;
    padding-left:50px;
    font-family:georgia;
    }
    #kontakt
    {
    background-color:#f2f2f1;
    height:200px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }
    #footer
    {
    background-color:#1f1f1f;
    height:30px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }
    #nav {
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        list-style: none;
        position:absolute;
        top:50px;
        right:10px;
        }
    #nav li {
        float: left; }
    #nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-family:arial;
        color: #b2b2b1;
        border-right: 1px solid #2e2e2d; }
    img.logo {
    padding-top:5px;
    padding-left:250px;
        }
    Owner of Visual Studio

  5. #4
    Junior Member Shahruk Khan's Avatar
    Join Date
    Jun 2011
    Location
    Queens, New York
    Posts
    8
    Member #
    28348
    Liked
    1 times
    This might be wrong so forgive me, but personally I would have each one with a different z-index and use margin-left to align it how I want.
    Overlord likes this.

  6. #5
    Member Overlord's Avatar
    Join Date
    May 2011
    Location
    Prijedor
    Posts
    86
    Member #
    27819
    Liked
    2 times
    Quote Originally Posted by Shahruk Khan, post: 211259
    This might be wrong so forgive me, but personally I would have each one with a different z-index and use margin-left to align it how I want.
    Thank you for your margin-left advice and it works fine but still text is going under each other..do you know what I mean?
    Owner of Visual Studio

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Yes. Instead of the <br>, make an empty div there like this:
    <div id=clearboth><?div>

    then in your CSS add this
    #clearboth {clear:both; }
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


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 09:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com