CODEWITHSUNDEEP
cssimageclasshtml
Cmddude
Cmddude

Reputation: 25

Cant seem to fix the css of my image

I don't know what i'm doing wrong. But I'm trying to get my image on the middle of the page with DIV class but it doesn't react to anything. I also tried img id, and DIV id. Im very inexperienced so maybe I'm making a stupid mistake, can someone help me out?

HTML:

    <!DOCTYPE html>



<html>

    <head>

    <title>De auteur</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <meta name="description" content="Geef hier een beschrijving over mijzelf, en een korte uitleg over de artikelen." />
    <meta name="author" content="Niomi Kleinen" />
    <meta name="keywords" content="Niomi, over mij, about me ..." />
    <!-- Hallo Justus! Wat vind je van mij amazing HTML pagina? -->



    </head>


<body>


    <div id="container">
    <div id="header">


    <h1>
        De auteur
    </h1>

    </div>
    <div id="navigation">

    <nav>
        <ul>
            <li><a href="index.html">De auteur</a></li>
            <li><a href="artikelen.html">Artikelen</a><li>
            <li><a href="nieuwsartikel.html">Nieuwsartikel</a></li>
            <li><a href="sfeerverslag.html">Sfeerverslag</a></li>
            <li><a href="column.html">Column</a></li>
        </ul>
    </nav>

    </div>
    <div id="content">


<div class="niomi"><img src="http://31.media.tumblr.com/2e16b169754e65a42844f08673c4197a/tumblr_mvg59hJCLI1s81hneo1_r1_250.jpg" alt="niomi"></div>

<p> 
blablabla.
</p>


    </div>
    

</body>

<div id="footer">
<footer> 
        <em> © copyright by Niomi, all rights reserved</em>
</footer>
    
    </div>
</div>

</html>

CSS:

#container
{
    margin: 0 auto;
    width: 600px;
    background:#fff;
}

#header
{
    text-align:center;
    background-image: url(http://www.freefever.com/stock/black-background-wood.jpg);
    padding: 20px;
    color:white;
    font-family:Impact,Courier;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 100%;
    background:#333;
    border-bottom:4px solid #000;
    overflow: hidden;
    position:relative;
}

#navigation ul
{
    clear:left;
    float:left;
    list-style:none;
    margin: 0;
    padding: 0;
    position:relative;
    left:50%;
    text-align:center;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
    float:left;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color:#fff;
    text-decoration: none;
    border-right: 1px solid#fff;
}

#navigation li a:hover { background:#1780b2; }

#content
{
    clear: left;
    padding: 20px;
}

#content h2
{
    color:#000;
    font-size: 160%;
    margin: 0 0 .5em;
}


body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

img.niomi {
    display: block;
    float:right;
    border-image:10px
}


footer
{
    background:#ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}

Upvotes: 0

Views: 232

Answers (5)

Mike Rouse
Mike Rouse

Reputation: 1298

You could use the text-align property on the DIV that surrounds your image. Something like:

.niomi {
    text-align: center;
}

This will centre align the image that is contained within the DIV, along with anything else that is in the DIV. That does depend on the surrounding DIV being 100% wide to achieve what you seem to want - if you later move the DIV around and it becomes nested you can end up with your image going off-centre.

A better approach would be to use the margin property, as found in this example.

Upvotes: 0

Jerome Dahdah
Jerome Dahdah

Reputation: 273

The main reason your styles are not catching on is because you have an extra } in the CSS for body. It causes the browser to ignore everything in your .niomi class.

Change:

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

to:

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg);
}

Then change your CSS to:

.niomi {
  text-align: center;
}

That should fix it.

One last unrelated issue that needs to be fixed:

Move the </body> tag down to one line above the final </html> tag.

Upvotes: 0

applepicke
applepicke

Reputation: 96

The css you're looking for is this:

.niomi {
    display: block;
    width: 200px;
    margin: 0 auto;
}

The reason the div isn't getting any of the css changes is because you have an extra brace at the end of this line:

body { 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

That causes the selector afterwards to crap out.

Upvotes: 1

Becuzz
Becuzz

Reputation: 6866

Your HTML and CSS really need some help. There are a few unclosed tags and some extra closing braces in your CSS. Regardless, the part you need to change is the CSS for your image. Note the changed selector and CSS.

.niomi img {
    display: block;
    margin: 0 auto;
}

Here is a working fiddle. I cleaned up the HTML a little along with the CSS. It may still have some issues, but I hope it gets you started.

Upvotes: 1

SpoonIsBad
SpoonIsBad

Reputation: 187

You may want to do some reading on margins, specifically on what "auto" does to elements.

http://www.w3schools.com/css/css_align.asp

Upvotes: 0

Related Questions