CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zach Kaplan
Zach Kaplan

Reputation: 103

HTML/CSS website formatting

I am coding my first website and ran into a (hopefully) small issue.

I am trying to add text UNDER this img but the second I add the p tag and add my paragraph, its like my website width suddenly goes whack... I'll put my HTML and CSS below. Note I took the p tag out so that you can see what it should look like... The minute I put the p tag in everything becomes a mess.

EDIT: Let me try to explain a bit better what I am trying to do. The first fiddle is my "home" page. When the user clicks the link "Game Preview: Warriors Rams" They are taken to another page which is fiddle number 2. When I attempt to put a paragraph UNDER the Rams Player IMG the website background image seems to zoom in and the "warrior" text on the right side shits outward... The first pic is WITH the paragraph under and the second is without. Sorry for the awful paint editing, the image was too large. Fiddle 1: https://jsfiddle.net/t8fveqdL/1/ Fiddle 2: https://jsfiddle.net/c1hyad70/

enter image description here enter image description here

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Official Website of the Whitewater Warriors</title>
        <link rel="shortcut icon" href="images/WhitewaterWarriorsLogo - Copy.ico">
        <link rel="stylesheet" href="PREVIEW.css"> 
    </head>

    <body>
        <header>
            <img src="images/WhitewaterWarriorsLogo.png" height="150" width="150" alt="Warrior Logo">
            <hgroup>
                <h1> <span class="shadow">The Official Website of the Whitewater Warriors</span> </h1>
            </hgroup>
        </header>
        <nav id="nav_bar">
        <ul>
            <li><a href="index.html" class="current"> Home </a></li>
            <li><a href="speakers.html"> Speakers </a></li>
            <li><a href="luncheons.html"> Luncheons </a></li>
            <li><a href="tickets.html"> Tickets </a></li>
            <li><a href="about.html"> About Us </a></li>
        </ul>
        </nav>
        <section>
        <img src="images/gurley_opbd_main_111115.jpg" alt="Rams Player" width="815px">

        </section>

        <footer>
            <p>
                &copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755
            </p>
        </footer>

    </body>
</html>

CSS:

section {
    position: relative;
    width: 815px;
    margin-bottom: 10px;
}

section img {
    position: relative;
    top: -26.5px;
    display: block;
    margin: 0 auto;
}

section p {
    padding: .5em;
}

Upvotes: 2

Views: 177

Answers (2)

Alvaro Montoro
Alvaro Montoro

Reputation: 29645

The "problem" is in here:

html {
    background-image: url("images/maxresdefault.png"); 
    background-repeat: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

There are two "issues" there:

  1. A real error in this property:

    background-repeat: no-repeat center center fixed;

    you are setting the values of background-repeat, background-position, and background-attachment in one property (background-repeat) when it should be separated like this:

    background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

  2. Not an error but what's causing the problem: the background-size:cover part. You are setting the background to fit the size of the html element, when you add a new paragraph, the size of the document (and the html) changes and the image is resized, which causes the "zooming effect" that you see in the two images that you shared.

Upvotes: 1

Irshad
Irshad

Reputation: 222

You can try adding image as a background image
background: url('images/bg.jpg');

NOTE: Else provide a fiddle for better understanding

Why don't you edit the image using PhotoShop or anything else to have the text in it :P Just saying

Upvotes: 1

Related Questions