Jump to content

Creating layout design in w3.css


psycoperl

Recommended Posts

Hello... I am trying to design a sticky header bar for my project. While I have already got the sticky bar working, I am now trying to create a better layout of the content on the bar using CSS (w3.css or standard css). 

I cannot figure out how to achieve this. Any suggestions?

What I would like to have (w/out the borders) is:

image.thumb.png.c18ccd3d062849fdfca5f9ec6e91a3d1.png

<table style="width:100%">
	<tr>
    	<td rowspan="3" width="50%">
        	<img src="img_lights.jpg" style="height:70px;width:350px" alt="logo_plc_holder">
        	<h3>PageTitle</h3> 
        </td>
        <td align="right"> 
        	Smith
        </td>
    </tr>
    <tr>
    	<td align="right">
        	Jones 
        </td>
    </tr>
    <tr>
    	<td align="right">
        	Logout 
        </td>
    </tr>    
</table>

what I have got so far... (but is not working as intended)...

image.thumb.png.c0e05820a4d72a0aa7987fc73406fafb.png

<div class="w3-row ">
	  <div class="w3-half">
          <img src="img_lights.jpg" style="height:70px;width:350px" alt="logo_plc_holder"><br /><h3>PageTitle</h3> 
      </div>
      <div class="w3-half"> 
      	<div class="w3-row" style="float:right;"> Smith </div>
      	<div class="w3-row" style="float:right;"> Jones </div>
        <div class="w3-row" style="float:right;"> Logout </div>
      </div>
</div>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...