Zaloguj się

agGresSive · 06-08-2011, 20:46

Witam,

na wstępie chciałbym zaznaczyć, iż dopiero zaczynam z kodowaniem stron WWW. Postanowiłem zacząć robić tutoriale z filmów ze strony: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-sleek-corporate-web-design-hd-video-series-day-3/ Zrobiłem gdzieś połowe kodowania i umarłem na div'ach obok siebie. Ustawilem ich floating, szerokosci wszystko tak jak na filmie, lecz dolny div ktory ma byc po prawej stronie nie chce wskoczyc do gory:

[Obrazek: 1.jpg]

poniżej zamieszczam moje kody html i css:

HTML

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

    <link href="css/master.css" rel="stylesheet" type="text/css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Particle</title>



<link href="style.css" rel="stylesheet" type="text/css" media="screen" />



</head>



<body>

    

    <div id="topContainer">    

        <div class="centerContainer">

                <a href="#" class="logo fl"><img src="img/logo.png" alt="Copra"></a>

        

                <div id="topContactInfo" class="fr">

                    <ul>

                        <li>

                            <p>Phone: 1.800.CORP</p>

                        </li>

                        <li>

                            <a href="mailoto:[email protected]"><p>Email: [email protected]</p></a>

                        </li>

                        <li class="noBorderBottom">

                            <p class="fl">Follow us:</p>

                        

                            <ul class="socialIcons">

                                <li><a href="#"><img src="img/social/twitter.png"></a></li>

                                <li><a href="#"><img src="img/social/facebook.png"></a></li>

                                <li><a href="#"><img src="img/social/rss.png"></a></li>

                            </ul>

                        </li>

                </div> <!-- koncowy topContactInfo -->

            </div> <!-- koncowy centerContainer -->

    </div> <!-- Koncowy topContainer div -->

    

    

    

    <div id="menuContainer">

        <div class="centerContainer">

            <ul id="nav">

                <li><a href="index.html">Home <span>go to start</span></li>

                <li><a href="services.html">Serwices <span>what we do</span></li>

                <li><a href="gallery.html">Gallery <span>our best products</span></li>

                <li><a href="clients.html">Our clients <span>what we have done for others</span></li>

                <li><a href="about.html">About us <span>who we are</span></li>

                <li><a href="contact.html">Contact <span>let's keep in touch</span></li>

            </ul>

        </div> <!-- end centerContainer -->

    </div> <!-- end menuContainer -->

    

    

    

    <div id="sliderContainer">

        <div class="centerContainer">

        

        </div> <!-- koncowy centerContainer -->

    </div> <!-- koncowy sliderContainer -->

    

    <div class="blankSeparator"><!-- --></div>

    

    <div id="serviceListContainer">

        <div class="centerContainer">

            <div class="OneThirdCol" id="col1">

                <img src="img/service1BW.png" alt="Serwices" class="fl">

                <h3>Tailored to your needs</h3>

                

                <p>Phasellus euismod luctus augue at pellentesq. Curabitur rutrum vehicula est at dignissim.</p>

                

                <ul class="arrowList">

                    <li><a href="#">Serwice 1</a></li>

                    <li><a href="#">Serwice 2</a></li>

                    <li><a href="#">Serwice 3</a></li>

                </ul>

            </div> <!-- koniec OneThirdCol -->

            

            <div class="OneThirdCol" id="col2">

                <img src="img/service2BW.png" alt="Serwices" class="fl">

                <h3>Awesome document handling</h3>

                

                <p>Phasellus euismod luctus augue at pellentesq. Curabitur rutrum vehicula est at dignissim.</p>

                

                <ul class="arrowList">

                    <li><a href="#">Serwice 1</a></li>

                    <li><a href="#">Serwice 2</a></li>

                    <li><a href="#">Serwice 3</a></li>

                </ul>

            </div> <!-- koniec OneThirdCol -->

            

            <div class="OneThirdCol lastCol" id="col3">

                <img src="img/service3BW.png" alt="Serwices" class="fl">

                <h3>We're always open</h3>

                

                <p>Phasellus euismod luctus augue at pellentesq. Curabitur rutrum vehicula est at dignissim.</p>

                

                <ul class="arrowList">

                    <li><a href="#">Serwice 1</a></li>

                    <li><a href="#">Serwice 2</a></li>

                    <li><a href="#">Serwice 3</a></li>

                </ul>

            </div> <!-- koniec OneThirdCol -->

        </div> <!-- koniec centerContainer -->

    </div> <!-- koniec serviceListContainer -->

    



    <div class="separator"><!-- --></div>

    

    <div class="centerContainer">

        <div id="leftContainer" class="fl">

            <h3>Lastes <span>news</span></h3>

            

            <ul id="left">

                <li>

                <h6>October 1st, 2011</h6>            

                <h3>Evanto is great</h3>                

                <p>Phasellus euismod luctus augue at pellentesque. Curabitur rutrum vehicula est at dignissim. Curabitur quam eros, dapibus eu aliquam sed, feugiat in lorem.</p>

                

                <a href="#" class="readMoreLink">Read more</a>                

                </li>

                <li>

                <h6>October 1st, 2011</h6>            

                <h3>Great vanto is great</h3>                

                <p>Phasellus euismod luctus augue at pellentesque. Curabitur rutrum vehicula est at dignissim. Curabitur quam eros, dapibus eu aliquam sed, feugiat in lorem.</p>

                

                <a href="#" class="readMoreLink">Read more</a>                

                </li>

                <li>

                <h6>October 1st, 2011</h6>            

                <h3>Machine Evanto is great</h3>                

                <p>Phasellus euismod luctus augue at pellentesque. Curabitur rutrum vehicula est at dignissim. Curabitur quam eros, dapibus eu aliquam sed, feugiat in lorem.</p>

                

                <a href="#" class="readMoreLink">Read more</a>                

                </li>

            </ul>

        </div><!-- koniec leftContainer -->

    </div>

    <div class="centerContainer">        

        <div id="rightContainer"class="fr">

            <h3>About <span>the company</span></h3>

            

            <p>Nullam gravida porta porta. Mauris pellentesque, elit in hendrerit ultrices, diam nisl euismod eros, nec blandit ante augue ac tellus. Nam fringilla ultrices ligula vitae laoreet.    

            </p>

            

            <blockquote><p>Nullam gravida porta porta. Mauris pellentesque, elit in hendrerit ultrices, diam nisl euismod eros, nec blandit ante augue ac tellus. Nam fringilla ultrices ligula vitae laoreet.</p>

            

            <p>Keep up the good work!</p></blockquote>

            

            <p>Nam id turpis massa, sit amet egestas orci. Maecenas faucibus elementum purus, sed hendrerit nunc vulputate eget.</p>

            

            <p>Here's some of our satisfied customers:</p>

            

            <ul id="clientList">

                <li><p><a href="#"><img src="img/clients/clientLogo1.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo2.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo3.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo1.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo2.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo3.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo1.png"></a></p></li>

                <li><p><a href="#"><img src="img/clients/clientLogo2.png"></a></p></li>

            </ul>                

        </div><!-- koniec rightContainer -->

    </div><!-- koniec centerContainer -->

    

    

    

    <div id="footerContainer">

        <div class="centerContainer">

            <div class="OneThirdCol">

                <h3>Recent Tweets</h3>

                

                <ul id="tweetlist">

                    <li>

                    <p>I'm looking for some cool web design #contract templates for #freelancers, any suggestions?</p>

                    <span>3 days ago</span>                    

                    </li>

                    <li>

                    <p>@mediatemple will definitely do that, thanks :)</p>

                    <span>6 days ago</span>    

                    </li>

                    <li>

                    <p>Now coding the Corpora Business Theme, having fun :D</p>

                    <span>13 days ago</span>    

                    </li>

                </ul>

            </div><!-- koniec one thirdcol-->

        

            <div class="OneThirdCol">

                <h3>Subscribe to us newsletter</h3>

                

                <p>Enter your email address below to subscribe. You will receive our newsletter once a week.</p>

                

                <form action"" id="subscribeForm" method="get">

                    <fieldset>

                        <div>

                            <input type="text" id="subscribeEmail" class="fl">

                            

                            <a href="#" id="newsletterSignup" class="redButton"><img src="img/RedButtonArrow.png"></a>

                        </div>

                    </fieldset>

                </form>

                

                <p>

                    <a href="#">Terms of use</a>

                    &nbsp;|&nbsp;

                    <a href="#">Privaty Policy</a>

                </p>

                    

            </div><!-- koniec one thirdcol-->

            <div class="OneThirdCol">

                <h3>Lets keep in touch</h3>

                

                <p>You can contact us by using the contact information below or by sending us a message via <a href="#">our contact form.</a></p>

                

                <ul id="bottomContact">

                    <li><p>85 Washington Ave., Suite 45, CA, USA</p></li>

                    <li><p>Phone: 1.800.CORP (1.800.2577)</p></li>

                    <li><p>Email: <a href="malioto:[email protected]">[email protected]</a></p></li>

                </ul>

                

            </div>

        </div> <!-- koniec center -->

    </div> <!--koniec footer -->

    

    

    

    <div id="copyrightsContainer">

        <div class="centerContainer">

            <p id="bottomCopyrights" class="fl">&copy; Copyright 2011 Corpora. All rights reserved</p>

            

            <ul class="socialIcons fr">

                <li><a href="#"><img src="img/social/twitter.png"></a></li>

                <li><a href="#"><img src="img/social/facebook.png"></a></li>

                <li><a href="#"><img src="img/social/rss.png"></a></li>

            </ul>

        </div> <!-- koniec centerContainer -->

    </div> <!-- koniec copyrightsContainer -->

</body>

</html>

CSS

Kod:
body {

    font-family: Arial, Tahoma, sans-serif;

    font-size: 12px;

    color: #444549;

    background: url('../img/topBG.png') 0 0 repeat-x;

}

h1 {

    font-size: 24px;

}

h3 {

    font-size: 14px;

    text-transform: uppercase;

}

h6 {

    font-sieze: 11px;

}

a {

    color: #dd0c46;

    text-decoration: none;

}

a:hover {

    text-decoration: underline;

}

p {

    margin: 15px 0;

    line-height: 1.5em;

}

.fl {float: left;}

.fr {float: right;}

.cl {clear: left;}

.cr {clear: right;}

.cb {clear: both:}

.noBorderBottom {

    border-bottom: none !important;

} 

div.separator {

    height: 14px;

    background: url(../img/separatorBG.png) 0 0 repeat-x;

    display: block;

    margin: 30px 0;

}

.lastCol {

    margin-right: 0px !important;

}

div.blankSeparator {

    margin-bottom: 30px;

    height: 1px;

    display: block;

}

/***************** STRUCTURE STYLES *************/

div.centerContainer {

    width: 960px;

    margin: 0 auto;

    overflow: hidden;

    }

div#leftContainer {

    width: 360px;

    margin-right: 50px;    

}

div#rightContainer {

    width: 550px;    

}

/***************** TOP SECTION ******************/    

div#topContainer {

    background: url(../img/topBG.png);

    height: 130px;

}

a.logo {

    margin-top: 40px;

}

div#topContactInfo {

    background: url(../img/topPaperShadow.png);

    width: 291px;

    height: 118px;

}

    div#topContactInfo ul {

        padding: 0 30px;

        margin-top: 10px;

    }

        div#topContactInfo ul li {

            border-bottom: 1px solid #ebebed;

        }

        div#topContactInfo ul li p {

            color: #92979d;

            font-size: 11px;

            background: url(../img/bulletPoint.png) left center no-repeat;

            padding-left: 15px;

            margin: 10px 0;

        }

            div#topContactInfo ul li ul {

                padding: 8px 0 0 5px;

                margin: 5px 0 0 30px;

            }

                div#topContactInfo ul li ul li {

                    padding: 5px;

                    display: inline;

                    border: none;

                }

/***************** MENU SECTION ******************/    

div#menuContainer {

    background: url(../img/menuBG.png) 0 0 repeat-x;

    height: 80px;

}

ul#nav li {

    display: inline;

    float: left;

    background: url(../img/menuSep.png) center right no-repeat;

    margin: 23px 30px 0 0;

}

    ul#nav li a {

        color: white;

        font-size: 14px;

        text-transform: uppercase;

    }    

    ul#nav li a:hover {

        text-decoration: none;

        color: #4F5056;

    }

    ul#nav li a span {

        color: #4F5056;

        font-size: 12px;

        text-transform: lowercase;

        display:block;

        padding-right: 30px;    

    }

/***************** SLIDER SECTION ******************/    

div#sliderContainer {

    background: url(../img/sliderBG.png) 0 0 repeat-x;

    height: 300px;

}

/***************** SERVICE SECTION ******************/

div.OneThirdCol {

    width: 285px;

    margin-right: 50px;

    float: left;

}    

div.OneThirdCol img {

    margin: 0 15px 15px 0;

}

div#serviceListContainer h3 {

    color: #2D2F33;

    margin-top: 12px;

}

div#serviceListContainer p {

    color: #919295;

    clear: left;

}

div#serviceListContainer ul li{ /*** strzalki ***/

    background: url(../img/bulletPoint.png) left center no-repeat;

    padding: 3px 3px 3px 15px;

} 

        div#col1 {

            background: url(../img/col1BG.png) bottom right no-repeat;

        }

        div#col2 {

            background: url(../img/col2BG.png) bottom right no-repeat;

        }

        div#col3 {

            background: url(../img/col3BG.png) bottom right no-repeat;

        }

Bardzo prosze o pomoc, lub wskazowke Smile

Signed,
Rafal.

**Kartofelek** · 06-08-2011, 21:00

Nie dales calego ale mniejsza z tym.
Prawy div który ci "ucieka" ma za dużą szerokość. Oba oczywiście mają mieć jakiś float.
Jeżeli szerokość jest ok, możliwe że przeszkadza ci za duży padding. I tyle Smile

agGresSive · Liczba postów: 3 Liczba wątków: 2 Dołączył: 06-08-2011 Reputacja: 0

@Kartofelek - wlasnie chodzi o to ze maja dobra szerokosc. Nawet gdy zmieniam szerokosci na bardzo male ta dolna tabela nie moze isc wyzej niz ostatnia linika z gornej.

Sam nie wiem dlaczego tak sie dzieje... wiec prosze o rady

/edit - solved:

mialem left i right osobno w centerContainer, dalem do jednego i dziala oO

Storm · 06-08-2011, 23:42

Powiem Ci jak to wygląda. Wklejam sobie ten Twój kod i zapuszczam walidator. W takim małym okienku, na samym dole mam output. I jak tak widzę jakieś dwa, trzy błędy to je szybko eliminuję. W Twoim przypadku mam 46 błędów i chociaż większość z nich dotyczy brakujących altów, to nie chce mi się w tym babrać. Mógłbyś mieć na tyle przyzwoitości, żeby zatroszczyć się o takie podstawowe sprawy zanim poprosisz o pomoc.

**Kartofelek** · (Ten post był ostatnio modyfikowany: 07-08-2011, 01:30 przez Kartofelek.)

A już wiem. Po spojrzeniu 2x na twój kod sądzę że nie słuchałeś/oglądałeś uważnie instruktażowych filmików.
Ma być tak:

Kod:
<div containerCenter>

      <div leftContainer>...</div>    

      <div rightContainer>...</div>

</div>

a nie jak u ciebie

Kod:
<div containerCenter>

      <div leftContainer>...</div>

</div>

<div containerCenter>

      <div rightCointainer>...</div>

</div>

Zresztą to zwykła logika.
ContainerCenter ma 960% i centruje (jak jego nazwa wskazuje) stronę na środku ekranu. W nim ma być content strony - czyli 2 mniejsze bloki itp

koeaoe · 07-08-2011, 06:46

Polecam korzystanie z takiego prostego sposobu na debugowanie w div-ach. Sposób polega na tym, że jeśli coś się rozjeżdża dodajesz do kodu css regułe div {border:1px solid red;}.

Jeśli problem tego wymaga nadajesz div-ą różne kolory.

btw. czemu nie wkleisz całego kodu?

Kartofelek, zapomniałeś o id.

(To mój pierwszy post na forum. Pozdrawiam wszystkich, fajne forum.)

**Kartofelek** · (Ten post był ostatnio modyfikowany: 07-08-2011, 07:50 przez Kartofelek.)

Moje to jest wzór a nie kod. Jeżeli kolega nawet tego nie zrozumie to ja mu nie będę w stanie pomóc.
Co do border - to się czasami przydaje dla IE. Dla FF czy chroma masz debugery jak Firebug.
Poza tym wiesz przecież, że border wpływa na wielkość divów i czasami te 2px sprawiają, że wszystko się rozwala

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie