Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
Change <table> into <div>
As I have been told quite a bit on here that <table> is out dated and very limited to what you can do with it. So I have decided to try this new fandangle <div> thingie
I have had some goes and trying to replace the items, however I have no luck as I dont fully understand what goes where, etc. How you do column and row spans, tables within tables, heights and widths, etc.
I want it to look like:
http://dev.gmoney.club/cnt
user: lisa
pw: Estrela1
Thanks all in advance!
I have had some goes and trying to replace the items, however I have no luck as I dont fully understand what goes where, etc. How you do column and row spans, tables within tables, heights and widths, etc.
I want it to look like:
http://dev.gmoney.club/cnt
user: lisa
pw: Estrela1
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td height=25> </td>
<td width=1346 align=center rowspan=3>
<table width=1346 height=100 cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=100 height=100 rowspan=3 background=images/CNT-original.png style="background-size: cover; background-position: center,center"> </td>
<td height=25 align=right><b><font size=2>Contact Us</font></b></td>
</tr>
<tr>
<td height=49 valign=absmiddle bgcolor=#006CB8><img src=images/top-bar-right.png height=49 align=absmiddle><font size=6 color=white><b> Cruise and Touring</b></font></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td bgcolor=#666666>
<table width=1246 cellpadding=0 cellspacing=0 border=0>
<tr>
<%
Set Menu=oConn.Execute("SELECT * FROM menu WHERE menu_live=YES ORDER BY menu_order")
Do Until Menu.EOF
%>
<td onMouseOver=ChangeColor(this); onMouseOut=UnChangeColor(this); align=center><font size=4 color=white> <%=Menu("menu_name")%> </font></td>
<%
Menu.MoveNext
Loop
%>
<td width=50%> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td bgcolor=#006CB8 height=49 align=right><img src=images/top-bar-left.png height=49 align=absbottom></td>
<td bgcolor=#006CB8 height=49> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Thanks all in advance!
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
This new fandangle <div> has been part of HTML since at least 1996. That would be 20 years now. 'tables' and 'divs' are similar in that they can contain blocks of content. They are different in that 'tables' are glued together and although you can stick 'divs' together, content and different screens sizes can unstick them.
Here is a simple example with tables and divs that shows both the similarities and differences.
Here is a simple example with tables and divs that shows both the similarities and differences.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tables and Divs</title>
</head>
<body>
<h1>Tables and Divs</h1>
<h2>Table version.</h2>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td style="width: 200px;background-color: #ccffff;">-1-</td><td style="width: 200px;background-color: #ffccff;">-2-</td><td style="width: 200px;background-color: #ffffcc;">-3-</td></tr>
<tr><td>-1a-</td><td>-2a-</td><td>-3a-</td></tr>
</table>
<h2>Div version</h2>
<div style="width: 200px;background-color: #ccffff;float: left;">-1-</div><div style="width: 200px;background-color: #ffccff;float: left;">-2-</div><div style="width: 200px;background-color: #ffffcc;float: left;">-3-</div>
<div>-1a-</div><div>-2a-</div><div>-3a-</div>
</body>
</html>
Thanks for that, yeah the new fandangle was a joke :)
I have tried to copy from examples, but never works...
Is someone able to convert for me, this way I can see what goes where
I have tried to copy from examples, but never works...
Is someone able to convert for me, this way I can see what goes where
There isn't a simple direct conversion because they don't work the same. I gave you that demo so you see how they are similar and different. You have to adopt a different way of thinking about using divs. To stack them horizontally like I showed, you need to use 'float' and a specified 'width'.
That is why I would like someone to help me with the conversion... everytime i do it, it complete stuffs it up
Hi Graeme.
Please rush to your bookstore as quickly as you can and purchase:
Headfirst Guide to HTML with CSS.
Yes, there'll be loads in there that you already know, but what you don't know is in there as well. And you will have a blast! The book is actually FUN!
I can tell by the way you are phrasing your question that there is a big disconnect happening. Tables are used for tabular data. They have their place, for just that! That's how it works now. You don't convert tables to anything. You just don't use them unless appropriately.
Once you get outside the table, outside the box, so to speak, then the sky's the limit. Yes, you will use divs instead of table, you'll also use <section>, <article> and a host of other tags that are standard in HTML5 depending on the content you are trying to display. Because that's where we're at now: HTML5.
You cannot think the same way as you did when using tables. HTML5, divs and all that jazz require a paradigm shift on your part.
So, go get the book. You won't regret it. It's also a quick read. I read it in 1 week and 1/2 about 7 years ago and decided to do web dev as a career! Never looked back. (It's been updated to reflect HTML5 and CSS3)
Also, one thing you must realize with web development. YOU WILL NEVER STOP LEARNING. You just can't. Things change SO quickly. To be honest, you should have dropped tables for layout about 8 years ago. Now, all sites need to be responsive. That's a whole nuther bundle of wax to melt down.
We are here to help you. But right now, it appears that you need to divorce your table mentality first.
;)
Please rush to your bookstore as quickly as you can and purchase:
Headfirst Guide to HTML with CSS.
Yes, there'll be loads in there that you already know, but what you don't know is in there as well. And you will have a blast! The book is actually FUN!
I can tell by the way you are phrasing your question that there is a big disconnect happening. Tables are used for tabular data. They have their place, for just that! That's how it works now. You don't convert tables to anything. You just don't use them unless appropriately.
Once you get outside the table, outside the box, so to speak, then the sky's the limit. Yes, you will use divs instead of table, you'll also use <section>, <article> and a host of other tags that are standard in HTML5 depending on the content you are trying to display. Because that's where we're at now: HTML5.
You cannot think the same way as you did when using tables. HTML5, divs and all that jazz require a paradigm shift on your part.
So, go get the book. You won't regret it. It's also a quick read. I read it in 1 week and 1/2 about 7 years ago and decided to do web dev as a career! Never looked back. (It's been updated to reflect HTML5 and CSS3)
Also, one thing you must realize with web development. YOU WILL NEVER STOP LEARNING. You just can't. Things change SO quickly. To be honest, you should have dropped tables for layout about 8 years ago. Now, all sites need to be responsive. That's a whole nuther bundle of wax to melt down.
We are here to help you. But right now, it appears that you need to divorce your table mentality first.
;)
Ok, checked a couple of book stores, not available. I dont really learn well from reading, im more of a visual side-by-side learner
Can someone just help me here convert it?? When I see what is happening thats how I will learn. I dont mind if it takes a 100 msgs back and forth, just as long as it ends up working, I will learn along the way (and im sure I will as some silly questions)
Please just someone help me here, instead of trying to fob me off to go do EVERYTHING as an extreme learning curve.
Can someone just help me here convert it?? When I see what is happening thats how I will learn. I dont mind if it takes a 100 msgs back and forth, just as long as it ends up working, I will learn along the way (and im sure I will as some silly questions)
Please just someone help me here, instead of trying to fob me off to go do EVERYTHING as an extreme learning curve.
Dave Baldwin gave you a side by side example above.
The fact that you can't discern that proves my point that you currently don't know what you don't know and you are asking us to do something for you the is not possible without dispensing copious knowledge about HTML5, CSS3 and other sundry issues regarding what kind of content you wish to display.
That is why I suggested the book. Order it from Amazon. It's actually made for folks who "don't learn well from books". It has cartoons in it, for goodness sake.
And it's not that you are just using a table for layout, you are actually using deprecated styles like: bgcolor=#666666. This stuff needs to be in a CSS file or in the head of your document...
Hard coding the width (width=1346 align=center rowspan=3) will insure you won't have a responsive layout. Even if you need to use a table properly, for tabular data, the way you are coding it won't fly.
If you are not aware of CSS floats, percentage widths and media queries...um, what we show you is meaningless and will never work...
You think what you are asking is simple. It is not. The code you've presented could have come from another dimension, it's so far off from what the web standards are today. Showing you how to make a single table into a div will not fix the overarching issues you have. We are here to answer questions not teach you web standards development.
You can take this as me trying "fob you off" or me trying to genuinely help you so you can be a better web developer for your clients. I'm hoping you can see it's the latter.
I'm afraid you need to climb the curve. Sorry.
The fact that you can't discern that proves my point that you currently don't know what you don't know and you are asking us to do something for you the is not possible without dispensing copious knowledge about HTML5, CSS3 and other sundry issues regarding what kind of content you wish to display.
That is why I suggested the book. Order it from Amazon. It's actually made for folks who "don't learn well from books". It has cartoons in it, for goodness sake.
And it's not that you are just using a table for layout, you are actually using deprecated styles like: bgcolor=#666666. This stuff needs to be in a CSS file or in the head of your document...
Hard coding the width (width=1346 align=center rowspan=3) will insure you won't have a responsive layout. Even if you need to use a table properly, for tabular data, the way you are coding it won't fly.
If you are not aware of CSS floats, percentage widths and media queries...um, what we show you is meaningless and will never work...
You think what you are asking is simple. It is not. The code you've presented could have come from another dimension, it's so far off from what the web standards are today. Showing you how to make a single table into a div will not fix the overarching issues you have. We are here to answer questions not teach you web standards development.
You can take this as me trying "fob you off" or me trying to genuinely help you so you can be a better web developer for your clients. I'm hoping you can see it's the latter.
I'm afraid you need to climb the curve. Sorry.
I can see Daves example, and as it is good, it is extremely basic, where as my current page has a few things that are not exampled. As I have said previously everytime i try and apply examples to my page it never works, that is why I want someone to help me
I dont pay for this service to to be told 'go buy a book' im here to get HELP of coders to help me do things
I will wait until some actually helps me, thank you
I dont pay for this service to to be told 'go buy a book' im here to get HELP of coders to help me do things
I will wait until some actually helps me, thank you
Here's a tip: It would help if you actually supplied an example of how you added Dave's code. Simply saying "I tried it and it didn't work" without showing us what you did, is useless.
<html>
<head>
<title>Cruise and Touring</title>
<link rel=icon href=images/CNT_icon.png>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { font-family: Arial }
body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; padding:0; }
.table { display:table; }
.cell { display:table-cell; }
.row { display:table-row; }
</style>
<script language="Javascript">
function ChangeColor(value){
value.style.backgroundColor = '#006CB8'
value.style.color = '#000000'
}
function UnChangeColor(value){
value.style.backgroundColor = '#666666'
value.style.color = '#000000'
}
</script>
<%
Dim oConn,oConnAE,Login
Set Login=Server.CreateObject("ADODB.Recordset")
Set oConn=Server.CreateObject("ADODB.Connection")
oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/cntcore.mdb")
' Set oConnAE=Server.CreateObject("ADODB.Connection")
' oConnAE.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("ae-core/activcore.mdb")
' SESSION("cn")="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("ae-core/activcore.mdb")&";Persist Security Info=False"
%>
</head>
<body>
<div class=table style="width:100%; border:0px">
<div class=row>
<div class=cell style="height:25px"> </div>
<div class=table style="width:1346px; height:100px; border:0px;">
<div class=row>
<div class=cell style="width:100px; height:100; background-image: url(images/CNT-original.png); background-size: cover; background-position: center,center"> </div>
<div class=cell style="height:25px; align:right;"><b><font size=2>Contact Us</font></b></div>
</div>
<div class=row>
<div class=cell style="height:49px; valign:absmiddle; bgcolor:#006CB8;"><img src=images/top-bar-right.png height=49 align=absmiddle><font size=6 color=white><b> Cruise and Touring</b></font></div>
</div>
<div class=row>
<div class=cell> </div>
</div>
<div class=row>
<div class=cell> </div>
<div class=table style="width:1246px; border:0px;">
<%
Set Menu=oConn.Execute("SELECT * FROM menu WHERE menu_live=YES ORDER BY menu_order")
Do Until Menu.EOF
%>
<div class=cell style="onMouseOver:ChangeColor(this); onMouseOut:UnChangeColor(this); align:center;"><font size=4 color=white> <%=Menu("menu_name")%> </font></div>
<%
Menu.MoveNext
Loop
%>
<div class=cell style="width:50%;"> </div>
</div>
</div>
</div>
</div>
<div class=cell> </div>
</div>
<div class=row>
<div class=cell style="bgcolor:#006CB8; height:49px; align:right;"><img src=images/top-bar-left.png height=49 align=absbottom></div>
<div class=cell style="bgcolor:#006CB8; height:49px;> </div>
</div>
<div class=row>
<div class=cell> </div>
<div class=cell> </div>
</div>
</div>
</body>
</html>
Hello again, I took some time to try and go over the code work in your comment ID: 41475233 that begins with -
<html>
<head>
<title>Cruise and Touring</title>
But the way that you have tried to literally convert the OLD concept HTML <table> to another HTML working using the CSS style of -
<style type="text/css">
.table { display:table; }
.cell { display:table-cell; }
.row { display:table-row; }
</style>
just can not work in the conversion you have tried to do. You have not used correct "HTML" organizations for the finished OUTPUT you need. And most (maybe all) of your "STYLE" for the way you have tried to do this, is not correct, or at least inappropriate for the finished output you need to do. You have even included the OLD tags like <font size=6 color=white> which are no longer appropriate in the finished output you require. PLEASE do not take these comments of mine as an Insult to you or your code work.
But you have so much incorrect HTML organizations like -
style="onMouseOver:ChangeC
which is NOT a style, but it's javascript and incorrect in the way you have tried to place it in your code work. That doing corrections to your code work above might not improve the result? It would seem to me like a new start in web page code and concept might be more helpful?
I was hoping to view your page at -
http://dev.gmoney.club/cnt.com.au/dev/www-v1.0/home.asp?
and do some html and css to maybe be a help, but the user and pass codes of -
lisa and Estrela1
do not work for me in firefox, so I am not able to do much code for a suggestion.
If I am not being helpful, just say so, and I will not continue here. But the other experts also seem to have trouble in finding a way to help? So maybe some other path to success needs to be found?
<html>
<head>
<title>Cruise and Touring</title>
But the way that you have tried to literally convert the OLD concept HTML <table> to another HTML working using the CSS style of -
<style type="text/css">
.table { display:table; }
.cell { display:table-cell; }
.row { display:table-row; }
</style>
just can not work in the conversion you have tried to do. You have not used correct "HTML" organizations for the finished OUTPUT you need. And most (maybe all) of your "STYLE" for the way you have tried to do this, is not correct, or at least inappropriate for the finished output you need to do. You have even included the OLD tags like <font size=6 color=white> which are no longer appropriate in the finished output you require. PLEASE do not take these comments of mine as an Insult to you or your code work.
But you have so much incorrect HTML organizations like -
style="onMouseOver:ChangeC
which is NOT a style, but it's javascript and incorrect in the way you have tried to place it in your code work. That doing corrections to your code work above might not improve the result? It would seem to me like a new start in web page code and concept might be more helpful?
I was hoping to view your page at -
http://dev.gmoney.club/cnt.com.au/dev/www-v1.0/home.asp?
and do some html and css to maybe be a help, but the user and pass codes of -
lisa and Estrela1
do not work for me in firefox, so I am not able to do much code for a suggestion.
If I am not being helpful, just say so, and I will not continue here. But the other experts also seem to have trouble in finding a way to help? So maybe some other path to success needs to be found?
With all due respect, Graeme, you lack a basic fundamental knowledge of HTML and CSS. It is impossible for me to help you.
That is why I suggested the book. It is the quickest and most painless way to get up to speed with at least the basics.
Right now it's as if you have a carriage and you are asking us to convert it to an automobile. You are taking the car parts and putting them on the carriage, but still expect it to be drawn by a horse because you are not versed in automotive technology.
As David pointed out: you need to change your mindset.
Moving from table layout to Web Standard Compliant code isn't a 1 to 1 conversion. It's a whole school of thought and new skills that have evolved over the last 10 - 15 years.
Without a holistic knowledge of HTML & CCS, our suggestions will always fail because you are trying to make them fit a structure that is alien to them.
That is why I suggested the book. It is the quickest and most painless way to get up to speed with at least the basics.
Right now it's as if you have a carriage and you are asking us to convert it to an automobile. You are taking the car parts and putting them on the carriage, but still expect it to be drawn by a horse because you are not versed in automotive technology.
As David pointed out: you need to change your mindset.
Moving from table layout to Web Standard Compliant code isn't a 1 to 1 conversion. It's a whole school of thought and new skills that have evolved over the last 10 - 15 years.
Without a holistic knowledge of HTML & CCS, our suggestions will always fail because you are trying to make them fit a structure that is alien to them.
I understand that I lack the knowledge of current HTML & CSS. This is why I am asking for help to convert it. I understand it isnt a 1:1 ratio and I have to change my mindset. However I do what particular mindset to go to without guidence.
I am just asking for a small bit of code to be converted over or helped to be converted (preferred)
It is never impossible to help.
And thank you very much David, that is making some more sense.
I am just asking for a small bit of code to be converted over or helped to be converted (preferred)
It is never impossible to help.
And thank you very much David, that is making some more sense.
David, I have just changed the access on the website, you should be able to see it without a user & pass
Thanks
Thanks
Just to clarify: It's Slick812 trying to log in. David provided an example of the proper code earlier in this thread.
My mistake, sorry for Slick812
Slick please try this link: http://dev.gmoney.club/cnt
Slick please try this link: http://dev.gmoney.club/cnt
The link you provided produces a blank page with this this error message:
Microsoft JET Database Engine error '80004005'
'E:\cnt.com.au\dev\www-v1.
/cnt.com.au/dev/www-v1.0/h
Microsoft JET Database Engine error '80004005'
'E:\cnt.com.au\dev\www-v1.
/cnt.com.au/dev/www-v1.0/h
The easiest thing you could do would be to re-create the elements of the table using divs with classnames. That is not how divs are intended to be used though.
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="table-data">fruit</div>
<div class="table-data">color</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-data">apple</div>
<div class="table-data">red</div>
</div>
</div>
</div>
.table {
display: table;
}
.table-head {
display: table-header-group;
}
.table-body {
display: table-row-group;
}
.table-row {
display: table-row;
}
.table-data {
display: table-cell;
}
OK, here my quick markup for the very top of a page that shows in your link, You seem to have some sort of menu that's a grey bar with a "Home" as the first, I changed these to links <a> which seemed more appropriate?
Since all of the display <div> are of a unique STYLE, , I use id instead of class to set the CSS style association.
I use a div as <div id="topBar"> for the ship image blue BAR display container and set the height to 101px .
The <div id="boatBar"> is 49px high, and has a blue background, I give it a top margin of 26px to move it down to match your page positions. Font color is white and font size is 32px .
I have the <div id="imgHold"> to be the Image container, with the the ship image you have for the circular ship image display, I use a border radius of 50% so I do NOT need your other two images to give the white space on the sides of the ship.
And then there is the <div id="menu1"> for the menu elements as links <a> I use the CSS hover as -
#menu1 a:hover {
so I do not need any javascript to change the mouse over color.
<!doctype html>
<html lang="en"><head>
<title>Cruise and Touring</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
body {
background:#fff;
margin: 0;
}
#topBar {
height: 101px;
border: 1px solid #fff;
}
#contact1 {
float: right;
margin-right:5px;
}
#boatBar {
background: #006CB8;
height: 49px;
margin-top: 26px;
color: #fff;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
line-height: 45px;
}
#imgHold {
display: inline-block;
vertical-align: top;
background: #fff;
margin-left: 33px;
margin-right: 11px;
border-radius: 50%;
padding: 2px 7px;
margin-top: -28px;
}
#imgHold img{
width: 100px;
vertical-align: middle;
}
#menu1 {
background: #666666;
margin-left: 133px;
font-size: 20px;
}
#menu1 a{
display: inline-block;
padding: 2px 6px;
color: white;
font-family: sans-serif;
margin: 1px 9px;
text-decoration: none;
}
#menu1 a:hover {
color: red;
background:#006CB8;
}
</style>
</head>
<body>
<div id="topBar"><a href="#" id="contact1">Contact Us</a>
<div id="boatBar">
<div id="imgHold"><img src="http://dev.gmoney.club/cnt.com.au/dev/images/CNT-original.png" />
</div>Cruise and Touring
</div>
</div>
<div id="menu1"><a href="#">Home</a><a href="#">Cruising</a><a href="#" >Touring</a><a href="#">Cheap Getaways</a><a href="#">Last Minute Deals</a>
</div>
</body>
</html>
Since all of the display <div> are of a unique STYLE, , I use id instead of class to set the CSS style association.
I use a div as <div id="topBar"> for the ship image blue BAR display container and set the height to 101px .
The <div id="boatBar"> is 49px high, and has a blue background, I give it a top margin of 26px to move it down to match your page positions. Font color is white and font size is 32px .
I have the <div id="imgHold"> to be the Image container, with the the ship image you have for the circular ship image display, I use a border radius of 50% so I do NOT need your other two images to give the white space on the sides of the ship.
And then there is the <div id="menu1"> for the menu elements as links <a> I use the CSS hover as -
#menu1 a:hover {
so I do not need any javascript to change the mouse over color.
Hi Slick, that is great thank you, have a bit of play around with it, alot is sorta understand better now (more trail and error to be had)
just wondering, with my original, i had a center table (1376pixels wide) and either side of that it just adjusted to the natural with of the users resolution, is that something we can do as well?
Please let me know
just wondering, with my original, i had a center table (1376pixels wide) and either side of that it just adjusted to the natural with of the users resolution, is that something we can do as well?
Please let me know
I am glad that you have taken the time to look at the CSS I used to get the page display to order and position the things (text blocks, images, menu, color bars). The HTML with CSS for this uses much less code writes than the <table> within <table> code u had before. However, you did not have a FULL WEB PAGE design in the example page you gave, as far as I could tell it was for a top Section to a page, sometimes called a header. To keep this code project in the simple zone, I did NOT include any "Responsive" <div> code, But the #topBar <div> will always go the full width of the screen, so it displays in the same way even on smaller (mobile) screens.
OK, now you ask -
"i had a center table (1376pixels wide) and either side of that it just adjusted to the natural with of the users resolution"
In pages now, you can not use a fixed width (unchanging) container or page column, they have to be able to somewhat adjust with all the many different ways users can see them on screens from a 3 inch flipper, to a 60 inch web TV.
Here is some <div> code that I added to the code above. I have changed this to start to be responsive. Now there are CSS for max-width and min-width to have Stop Widths for the max an element can be displayed.
For the Menu I have added width break points by using the CSS @media definitions as -
@media screen and (max-width: 824px){
@media screen and (max-width: 553px){
For your "I had a center table" thing, I have add 3 <div> with CSS .content #main1 #right1
these change widths as the screen gets smaller, please drag your laptop browser window to smaller and smaller widths to see how they change to smaller widths automatically.
I did not use the 1376px wide for the .content it seemed to large to me, i have it as -
max-width: 1155px;
OK, now you ask -
"i had a center table (1376pixels wide) and either side of that it just adjusted to the natural with of the users resolution"
In pages now, you can not use a fixed width (unchanging) container or page column, they have to be able to somewhat adjust with all the many different ways users can see them on screens from a 3 inch flipper, to a 60 inch web TV.
Here is some <div> code that I added to the code above. I have changed this to start to be responsive. Now there are CSS for max-width and min-width to have Stop Widths for the max an element can be displayed.
For the Menu I have added width break points by using the CSS @media definitions as -
@media screen and (max-width: 824px){
@media screen and (max-width: 553px){
For your "I had a center table" thing, I have add 3 <div> with CSS .content #main1 #right1
these change widths as the screen gets smaller, please drag your laptop browser window to smaller and smaller widths to see how they change to smaller widths automatically.
I did not use the 1376px wide for the .content it seemed to large to me, i have it as -
max-width: 1155px;
<!doctype html>
<html lang="en"><head>
<title>Cruise and Touring</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
body {
background:#fff;
margin: 0;
}
#topBar {
position: relative;
height: 77px;
min-width: 440px;
border: 1px solid #fff;
}
#contact1 {
position: absolute;
top:1px;
right: 5px;
}
#boatBar {
background: #006CB8;
height: 49px;
margin-top: 26px;
color: #fff;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
line-height: 45px;
}
#boatBar span{
margin-left: 170px;
}
#imgHold {
position: absolute;
display: inline-block;
top: -9px;
left: 33px;
background: #fff;
/* vertical-align: top;
margin-left: 33px;
margin-right: 11px;
margin-top: -29px; */
border-radius: 50%;
padding: 7px;
}
#imgHold img{
width: 100px;
vertical-align: middle;
}
#menuOut {
min-width: 480px;
text-align: center;
}
#menuIn {
display: inline-block;
background: #bcd;
font-size: 18px;
border-radius: 12px;
}
#menuIn a{
display: inline-block;
background:#009cc8;
padding: 2px 5px;
color: white;
font-family: sans-serif;
margin: 3px 6px;
text-decoration: none;
border-radius: 11px;
}
#menuIn a:hover {
color: blue;
background:#d8bC00;
}
.mubk{display: none;}
.content {
max-width: 1155px;
min-width: 440px;
border: 1px dotted #c00;
margin: 6px auto;
padding; 2px 0.3%;
text-align: center;
}
#main1 {
display: inline-block;
vertical-align: top;
width: 77.3%;
min-height: 29em;
text-align: left;
padding: 4px 0.4%;
background: #efe;
border-radius: 1em;
}
#right1 {
display: inline-block;
vertical-align: top;
width: 19.4%;
min-height: 19em;
padding: 4px 0.4%;
margin-left: 0.1%;
background: #eef;
border-radius: 1em;
}
@media screen and (max-width: 824px){
.mubk{display:inline;}
#menuIn {font-size: 17px;}
#boatBar {font-size: 28px;}
#boatBar span{margin-left: 155px;}
}
@media screen and (max-width: 553px){
#menuOut {text-align: left;}
#menuIn {margin-left: 140px; text-align: center;}
}
</style>
</head>
<body>
<div id="topBar"><a href="#" id="contact1">Contact Us</a>
<div id="boatBar">
<span>Cruise and Touring</span>
</div>
<div id="imgHold"><img src="http://dev.gmoney.club/cnt.com.au/dev/images/CNT-original.png" /></div>
</div>
<div id="menuOut">
<div id="menuIn">
<a href="#">Home</a><a href="#">Cruising</a><a href="#" >Touring</a><br class="mubk" /><a href="#">Cheap Getaways</a><a href="#">Last Minute Deals</a>
</div>
</div>
<div class="content">
<div id="main1">This is the MAIN information Section - Column<br />That has all the important CONTENT!</div>
<div id="right1">This is the RIGHT info Section<br />That has less content</div>
</div>
<hr>
</body>
</html>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial