1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make this type layout by css and php or html

Discussion in 'CSS' started by Tuhin1234, Oct 8, 2015.

0
  1. #1
    how to make this type layout by css,php,html. i am trying to make a wordpress thems . this is the content layout of index.php page
    [​IMG]
     
    Tuhin1234, Oct 8, 2015 IP
  2. th.sigit

    th.sigit Well-Known Member

    Messages:
    178
    Likes Received:
    32
    Best Answers:
    1
    Trophy Points:
    135
    #2
    Create something similar like this.

    
<html>
<body>

<div id="header">
<!--HTML codes here-->
</div>

<div id="sidebar">
<!--HTML codes here-->
</div>

<div id="content">
<div class="column">
<!--HTML codes here-->
</div>
<div class="column">
<!--HTML codes here-->
</div>
<div class="column">
<!--HTML codes here-->
</div>
</div> <!--end of div#content

</body>
</html>
    HTML:
    Adjust CSS rules as necessary. Easiest: 
    
#header {
  margin: 0 auto;
  width: 100%;
}

#sidebar {
  float: left;
  width: 25%;
}

#content {
  float: right;
  width: 75%;
}

.column {
  width: 33%;
  display: inline;
}
    Code (markup):
     
    th.sigit, Oct 8, 2015 IP
  3. Tuhin1234

    Tuhin1234 Active Member

    Messages:
    178
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    71
    #3
    thanks sir...
     
    Tuhin1234, Oct 8, 2015 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    You might want to be careful with that. Elements that are {display: inline;} do not have explicit widths or heights (though MSIE has a long history of screwing that up). You could use {display: inline-block;} instead.

    Second, you're going have a gotcha biting your rump if you don't account for word-spacing between the elements.

    cheers,

    gary
     
    kk5st, Oct 8, 2015 IP
  5. th.sigit

    th.sigit Well-Known Member

    Messages:
    178
    Likes Received:
    32
    Best Answers:
    1
    Trophy Points:
    135
    #5
    @kk5st: thanks for the correction.

    PS: Nice site, and nice tutorials there you have on your sig
     
    th.sigit, Oct 8, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I also wouldn't use % for the narrower column as that tends to fall apart quickly. It's also sloppy to float BOTH columns, and in an ideal world usually you want the larger column FIRST since without the CSS layout you want the page to be more useful to visitors. Again, the "content first" approach to development.

    Which of course is why dicking around making columns without the semantic markup FOR those columns is utterly and completely back-assward.

    but then those bottom three equal width equal height elements? How are those going to adjust to differing content sizes? Again, goofy graphical crap that you might be able to do in a paint program, but has no business in a layout if you care about accessibility, graceful degradation, or are even simply trying to make a proper semi-fluid elastic responsive layout; three things ALL designs should be from this point onwards. MOST of which they are supposed to have been all along!
     
    deathshadow, Oct 11, 2015 IP
    th.sigit likes this.
  7. klakshman8

    klakshman8 Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #7
    you did exactly how it should be with % for responsive also.Nice example of coding
     
    klakshman8, Oct 16, 2015 IP
  8. Meharali

    Meharali Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    Brother you skip one Big column.
     
    Meharali, Oct 16, 2015 IP
  9. th.sigit

    th.sigit Well-Known Member

    Messages:
    178
    Likes Received:
    32
    Best Answers:
    1
    Trophy Points:
    135
    #9
    I did. Can you try to fix it?
     
    th.sigit, Oct 16, 2015 IP