WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Divs on front page (10 posts)

  1. sivn
    Member
    Posted 11 months ago #

    Hello, complete newbie here. Sorry! :/

    So, I made a front-page.php file and set front page to static in the dashboard.

    I have created a simple theme using a tutorial and am now adding divs in the css to be displayed on the front page. These divs do not appear to show up, but when I place an image inside the div the image appears.

    Is there a code I need to add somewhere to make the divs appear? Plus, does it make sense that the image appears but not the div with a set width, height and background colour?

    Thanks for your help...

  2. Andrew
    Forum Moderator
    Posted 11 months ago #

    We need to see the issue to help with this.

  3. sivn
    Member
    Posted 11 months ago #

    /* style.css */
    
    #wrapper{
        margin: 0 auto;
        width: 960px;
        width: 960px;
        text-align: left;
        background: #fff;
    }
    
    .sidebar{
        float: right;
        width: 235px;
        margin: 0 0 0 0px;
        font-size: 14px;
        list-style: none;
        background: #A8D0DF;
        padding: 20px;
    
    /* This is the new div I am trying to add */
    
    #mainpic{
        float: left;
        width: 665px;
        height: 900px;
        background: #A8D0DF;
        padding: 0 20px 0 20px;
    
    /* this is from the front-page.php */
    <?php get_header(); ?>
    
    	<div class="mainpic">
    	<img src="http://localhost/wp-content/uploads/2013/08/mainpic-marie.jpg" width=665 height:=386>
    	</div>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  4. Andrew
    Forum Moderator
    Posted 11 months ago #

    Please provide a link to the webpage with the issue.

  5. sivn
    Member
    Posted 11 months ago #

    /* from style.css */
    
    #wrapper{
        margin: 0 auto;
        width: 960px;
        width: 960px;
    	text-align: left;
        background: #fff;
    }
    
    #mainpic{
        float: left;
        width: 665px;
        height: 900px;
        background: #A8D0DF;
        padding: 0 20px 0 20px;
    }
    
    .sidebar{
        float: right;
        width: 235px;
        margin: 0 0 0 0px;
        font-size: 14px;
        list-style: none;
        background: #A8D0DF;
        padding: 20px;
    }
    
    /* from front-page.php */
    
    <?php get_header(); ?>
    
    	<div class="mainpic">
    	<img src="http://localhost/wp-content/uploads/2013/08/mainpic-marie.jpg" width=665 height:=386>
    	</div>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  6. sivn
    Member
    Posted 11 months ago #

    Oh, I am running it locally only with MAMP...

  7. Andrew
    Forum Moderator
    Posted 11 months ago #

    How familiar are you with CSS?

  8. sivn
    Member
    Posted 11 months ago #

    I just know the very basics, and look up each thing I am doing online.

  9. Andrew
    Forum Moderator
    Posted 11 months ago #

    Are you familiar with the concept of how CSS targets HTML elements through classes (.) and ids (#) ?

  10. sivn
    Member
    Posted 11 months ago #

    Oh!! Bingo. I should have put id in stead of class!! You are a good teacher. Thank you very much. Steep learning curve here... ;)

Reply

You must log in to post.

About this Topic