CODEWITHSUNDEEP
javascripthtmlcss
dani_developer
dani_developer

Reputation: 39

How can I display my slider correctly

everyone i'm new to html/css..I want to display my slider in the center. Can anyone check what wrong in my code & why my Info div come right there where I want display my Slider....Thanks in advance.

Here is HTML Code: 

 <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="mystyle.css">
        <title>GR PROVIDER</title>
    </head>

    <body>
        <div class="Header">
            <div class="heading">
                 <h2> Gulf Resources Provider </h2>

            </div>
            <div class="socialmedia">
                <ul>
                    <li> <a href=""> <img src="GRProvider/Facebook.jpg"> </a> 
                    </li>
                    <li> <a href=""> <img src="GRProvider/LinkedIn.jpg"></a> 
                    </li>
                    <li> <a href=""> <img src="GRProvider/Google.jpg"> </a> 
                    </li>
                    <li> <a href=""> <img src="GRProvider/Twitter.jpg"> </a> 
                    </li>
                </ul>
            </div>
        </div>
        <div class="images">
            <div class="pics">
                <img src="GRProvider/Img.jpg" />
            </div>
            <div class="pics">
                <img src="GRProvider/Img_2.jpg" />
            </div>
        </div>
        <div class="diagram">
            <div class="sample">
                <img src="GRProvider/Img_3.jpg" />
            </div>
            <div class="sample">
                <img src="GRProvider/Img_4.jpg" />
            </div>
        </div>
        <div class="main_content">
            <div class="navigation">
                <ul>
                    <li> <a href="#"> HOME </a> 
                    </li>
                    <li> <a href="#"> ABOUT US </a> 
                    </li>
                    <li> <a href="#"> CAREER </a> 
                    </li>
                    <li> <a href="#"> CONTACT US </a> 
                    </li>
                </ul>
            </div>
            <div class="Slider">
                <div class="slider_img">
                    <img src="GRProvider/Slider.jpg">
                </div>
            </div>
        </div>
        <div class="Info">
            <div class="About_Us">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum.............</p>
            </div>
            <div class="button">
                <button type="button">READ MORE</button>
            </div>
        </div>
        <div class="content">
            <div class="text">
                <img src="GRProvider/Img_4.jpg" />
                 <h4> PRODUCT INFORMATION </h4>

                <p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
            </div>
            <div class="text">
                <img src="GRProvider/Img_5.jpg" />
                 <h4> PRODUCT INFORMATION </h4>

                <p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
            </div>
            <div class="text">
                <img src="GRProvider/Img_6.jpg" />
                 <h4> PRODUCT INFORMATION </h4>

                <p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
            </div>
        </div>
        <div class="footer">
             <h3> Copyright by Bitsprovider.com </h3>

        </div>
        </div>
    </body>

</html>

Here is stylesheet attached.

* {
    margin: 0% auto;
    padding: 0;
    width: 90%;
}
body {
    background-color: #1e93a5;
    width: 100%;
}
.header {
    margin: 2%;
    width: 100%;
}
.heading {
    float: left;
    width: 70%;
}
h2 {
    color: #fff;
    padding: 0 25%;
}
.socialmedia {
    float: left;
    width: 30%;
}
.socialmedia > img {
}
ul {
    width: 100%;
}
li {
    float: left;
    list-style: outside none none;
    text-decoration: none;
    width: 11%;
}
a {
    border: 1px solid #0e8393;
    color: black;
    float: left;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.images {
    float: left;
    width: 20%;
}
.pics img {
    width: 100%;
}
.diagram {
    float: right;
    width: 20%;
}
.sample img {
    width: 100%;
}
.main_content {
    float: left;
    width: 60%;
}
.navigation {
    width: 100%;
}
.navigation > ul {
    width: 100%;
}
.navigation > ul li {
    list-style: outside none none;
    text-decoration: none;
    width: 25%;
}
.navigation > ul li a {
    background-color: #2dacbe;
    color: black;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.slider {
    width: 100%;
}
.slider_img {
    width: 100%;
}
.info {
    float: left;
    width: 100%;
}
.About_Us {
    float:left;
    width: 100%;
}
p {
    width: 100%;
    color: #FFF;
    background-color: #1e93a5;
    text-align:justify;
}
.button {
}
.content {
    float: left;
    width: 100%;
}
.text {
    float: left;
    width: 33%;
}
.text > img {
    border: 1px solid #18204e;
    width: 93%;
}
h4 {
    background-color: #263270;
    color: #fff;
    width: 93%;
}
.text > p {
    background-color: #d3d3d3;
    color: #fff;
    width: 93%;
}
.footer {
    float: left;
    padding: 2%;
    width: 100%;
}
h3 {
    color: #fff;
    text-align: center;
}

Upvotes: 0

Views: 45

Answers (1)

jShoop
jShoop

Reputation: 411

This will center your slider, because it's within the main_content class.

.main_content {
    margin: 0 auto;
    width: 100%;
    clear: both;
}

Once you put the images in the slider, you will have to set that group to be centered as well, but that's controlled through whatever javascript you use for the slider. If it's just one image use .myImageClass{text-align: center}.

edit: jsfiddle

Upvotes: 1

Related Questions