Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 07-12-2014, 07:43 PM
kickerplays kickerplays is offline
Contributing Member
 
Join Date: 08-26-12
Location: east coast
Posts: 60
iTrader: 0 / 0%
enclosed is my site code and have newbi issues.
The middle page articles aren't styled how I like. I want style the first article(mathematics needed at the 1-2 game) differently than the articles that follow it(starting hands/top ten tips, more to come).

PHP Code:
<!DOCTYPE html>
<
html lang="en">
<
head
<
meta charset="utf-8"/>
<
title>im so tired</title>
<
link rel="stylesheet" href="main.css"/>
</
head>
<
body>
<
div id="big_wrapper">
    <
header id="top_header">
    <
h1>Nerdy Poker=Money and Girls</h1>    
    <
h3>A complete guide to crushing the 1-2 game</h3>
    </
header>
    
    
    <
nav id="top_menu">
    <
ul>
    <
li>home</li>
    <
li>tutorials</li>
    <
li>podcast</li>
    </
ul>
    </
nav>
    
    
    <
div id="left">
        <
nav id="left">
    
    <
ul>
      <
li>    <a href="#">  Home</a>     </li>
      <
li><a href="#">Products</a></li>
      <
li><a href="#">About</a></li>
      <
li><a href="#">Various Charts</a></li>
      <
li><a href="#">Live Play Tips</a></li>
      <
li><a href="#">SEARCH</a></LI>
      <
li><a href="#">Products</a></li>
      <
li><a href="#">About</a></li>
      <
li><a href="#">Various Charts</a></li>
      <
li><a href="#">Live Play Tips</a></li>
      <
li><a href="#">Live Play Tips</a></li>
    </
ul>
    </
nav>

</
div>
    
  <
section id="middle">
    <
article> <a href="#">
      <
header>
        <
hgroup>
          <
h1>The mathematics needed at your local 1-2 game</h1>
          <
h3>Dont get this wrong</h3>
        </
hgroup>
      </
header>
      <
p>mathematics of the game</p>
      </
a>
    </
article>
    

        <
article>    <a href="#">    
      <
header>
        <
hgroup>
          <
h1>starting hand charts</h1>
          <
h2>what to play and when to play it</h2>
        </
hgroup>
      </
header>
      <
footer>
        <
p>your starting place of how to play poker</P>
      </
footer>  </a>
        </
article>
        
    
            <
article>    <a href="#">    
      <
header>
        <
hgroup>
          <
h1>top 10 all time tips</h1>
          <
h2>remember these tips to keep you i the gamw</h2>
        </
hgroup>
      </
header>
      <
footer>
        <
p>this will help you avoid stepping into traps</P>
      </
footer>  </a>
        </
article>
      
       </
article>
     </
div>
     
         <
div id="right">
  <
p>the side ads</p>
    </
div>
    
    
    
    <
div id="footer">
    
copywright poker math productions
        
</div>    
</
div>
</
body>            
</
html>








AND 
THE CSS




*{
margin:0px;
padding:0px;
}
#big_wrapper{
width:1000px;
margin:0px;
}
#top_header{
border:1px solid red;  
text-align:center;
float:right;
color#FFD700  ;
background#000000  ;
margin:10px 5 5 5;
width:100%;
height:100px;
}



#top_menu{
    
background:   #380000     ;  
    
color:   #FFD700   ;
    
border:1px solid red
        }
        
        
#top_menu li{
            
display:inline-block;
            list-
style:none;
            
padding:8px;
            
font:bold 14px tahoma;
            }
            
            
            
            
            
            
            
            

#left{
float:left;
color:    #FFD700 ;
background:#000000;
margin:5px 15px 5px 0;
border:1px solid black;
width:110px;
height:620px;
}



#left  ul{

color:     #FFD700 ;
margin:0px;
list-
style-type:none;
}
#left ul li{
background-color:#000000 ;
color:  #FFD700 ;
margin:5px;
padding:10px;
width:70px;
border:3px outset  #E80000;
}

#left ul li a{
display:block;
width:75px;
height:15x;
text-align:center;
text-decoration:none;
line-height:15px;
}
a{
color#ffffff;
}






#middle{
background:      #C8C8C8    ;
float:left;
margin:10px 15px 10px 0;
width:610px;
height:630px;
}


article {
    
width:300px;
    
text-align:center;
    
background#000000 ;
    
border:1px solid red;
    
padding:10px;
    
margin:0 auto;
    
margin-bottom:15px;
}            
article footer {
    
text-align:center;
}




#right{
float:right;
background:   #A0A0A0  ;
margin:10px 15px 10px 0;
width:225px;
height:630px;
}

#footer{



Last edited by snakeair; 07-12-2014 at 10:35 PM.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 07-14-2014, 09:39 PM
williamforrest williamforrest is offline
Contributing Member
 
Join Date: 12-01-13
Posts: 98
iTrader: 0 / 0%
you can add classname or id attribute to each <article> so you can distiguish or specify a custom style for each column..
HTML Code:
<article id="article1"> ... </article> <article id="article2"> ... </article> <article id="article3"> ... </article>
for you css:
Code:
#article1 { background:red; } #article2 { background:blue; } #article3 { background:green; }
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
styling list to look right kickerplays Coding Forum 2 01-15-2013 02:13 PM
Changing h1 styling in css issue... adomino Coding Forum 2 03-28-2012 11:42 PM
styling a variable Jester Coding Forum 2 09-02-2011 06:31 PM
CSS Styling page questions _Dynasty_ Coding Forum 3 02-19-2011 04:01 PM
Styling a Form? Kesava Web Design Lobby 3 12-11-2010 02:38 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 01:36 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC