So, I’m a script monkey at the core. Lately I seem to get stuffed into doing design too for some odd reason and, well, let’s just say I should probably have studied better.
Either way – What I ask is, what’s the Right way to structure a website?
This one has a header with links, then a block with tabs, right under another block which consists of two parts and under those a few others who I’m not at yet.
However, the thing is, I need to make a block that consists of two parts that are in the same box but structured independently.
I’ll try to draw it up.
Browser window..................-[]X
------------------------------------
|.................Header Links Here|
||Tab|Tab|Tab|_____________........|
||Tab content.............|Small...|
||........................|Section.|
||---Line signing new section------|
||........................|Another.|
||..Content Area..........|Small...|
||........................|Section.|
------------------------------------
My issue is in the division of small sections and tab/content areas.
I tried using floats, making them as tables, aligning and whatnot.
The putting float:left on both tables worked. Kinda. Until I tried to resize the window.
So, how do you PROPERLY structure a site like this? three divs and tables? Something else?
I’ll clarify this again: It’s the Code to use to create the look above that I’m trying to figure out the proper way to do, not the design
As requested here’s the current structure I have
<div class="container">
<div class="topBlock">
//Header Links Here </div>
<div class="inputBlock">
<ul id="tabs">
<li><a href="#strict">Strict</a></li>
<li><a href="#flex">Flex</a></li>
<li><a href="#multiStep">Multi-Step</a></li>
</ul>
<div id="strict" class="tabContent">
<table class="tableLeft">
<tr>
<td>From</td>
</tr>
<tr>
<td><input id="inputBlockFrom" type="text" placeholder="FROM"/></td>
</tr>
<tr>
<td>To</td>
</tr>
<tr>
<td><input id="inputBlockTo" type="text" placeholder="TO"/></td>
</tr>
</table>
<table class="tableRight">
<tr>
<td>Leave</td>
</tr>
<tr>
<td><input id="inputBlockLeave" type="text" name="leave" placeholder="LEAVE"/></td>
<td><input id="inputBlockOne" type="radio" name="one"/></td>
<td>One</td>
</tr>
<tr>
<td>Return</td>
</tr>
<tr>
<td><input id="inputBlockReturn" type="text" name="return" placeholder="RETURN"/></td>
<td><input id="inputBlockBut" type="radio" name="one" checked/></td>
<td>Return</td>
</tr>
<tr>
<td><input id="inputBlockSubmit" type="submit" value="Search"/></td>
</tr>
</table>
</div>
<div id="flex" class="tabContent">
Test Two
</div>
<div id="multiStep" class="tabContent">
Test Three
</div>
</div>
<div class="mapBlock tabContent">
<table class="tableLeft">
<tr><td>
<div id="map" class="google_map"></div>
</td></tr>
</table>
<table class="tableRight smallTable">
<tr>
<td>Distance</td>
</tr>
<tr>
<td>[-------------|------------]</td> //Slider to be
</tr>
</table>
<table class="tableRight smallTable">
<tr>
<td>Choice / Choice</td>
</tr>
</table>
<table class="tableRight">
<tr>
<td>Show:</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Price</td>
<td><input type="radio"/></td>
<td>Button!</td>
</tr>
<tr>
<td><input type="radio"/></td>
</tr>
<tr>
<td><input type="radio"/></td>
</tr>
</table>
</div>
</div>
</body>
Sorry if it’s messed up in the whitespacing somewhere..
The CSS:
body {
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #e2edff;
}
.container {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
}
.pageBlock {
/* To future me: This class is for One Full Screen ideas */
min-height: 300px;
}
.topBlock {
text-align: right;
color: #000000;
}
.topBlock a {
text-decoration: none;
color: #000000;
}
.tableLeft {
width: 75%;
float: left;
border-right: dotted 2px black;
}
.tableRight {
float: left;
overflow: auto;
}
.smallTable {
border-bottom: 1px dotted #c9c3ba;
}
.google_map {
height: 270px;
width: 100%;
}
Here is an example of how I would model the html.
Notes
anchor[<a>] for more flexible styling, I did not demonstrate this in an attempt to prevent bloated CSS in example.They are not especially necessary in this scenario, but useful none-the-less.Frameworks are highly suggested to achieve graceful responsive layouts. Here’s a post on the subject#page > #contentstructure may be redundant in this specific example. However, I included it because this is correct if you would like to include a#sidebaras a sibling to#content, allowing for the styling of the wrapper [#page]