2

I am having some trouble with some code that I have made. On my template page, I have a navigation bar which has css. I am not sure what to do when it resized because of the screen reslolution. please could someone help me please. Her is my html and css code:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#cssmenu {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width:100%;
  width: auto;
  
}
#cssmenu ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  float: left;
  width:23%;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#cssmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
  width:100%;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#cssmenu li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
<!DOCTYPE html>
<html xmlns="undefined">
<head>
<link rel="stylesheet" href="../Website/css/navbar.css">
<link rel="stylesheet" href="..Website/css/common.css">
<link rel="stylesheet" href="../Website/css/demo.css">
<link rel="stylesheet" media="screen" href="../Website/css/form.css" >
<link rel="stylesheet" href="../Website/css/index2.css">
<link rel="stylesheet" href="../Website/css/index3.css">
<link rel="stylesheet" href="../Website/css/index4.css">
<link rel="stylesheet" href="../Website/css/price2.css">
<link rel="stylesheet" href="../Website/css/price3.css">
<link rel="stylesheet" href="../Website/css/price4.css">
<link rel="stylesheet" href="../Website/css/accessoriesimages1.css">
<link rel="stylesheet" href="../Website/css/laminateimage1.css">
<meta http-equiv="Content-Type" content="text/html; charset:windows-1252">
<style type="text/css">
<meta name= "description" content="Flooring services for all domestic work, with trainer and well equipt fitters">
body,td,th {color: #000000;}
body {background-color: #00c0bd;}
a {font-size: 10px;
 color: #00CC33;}
a:visited {color: #FF0000;}
a:hover {color: #000000;}
a:active {color: #FF0000;}
a:link {color: #000000;}
.style1 {font-size: xx-small;
 font-family: 'Lato', sans-serif;}
.style2 {font-family: 'Lato', sans-serif}
-->
</style>
<script type="text/JavaScript">
<!--

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" bordercolor="#F0F0F0">
  <tr>
    <th rowspan="2" scope="col"><a href="../Website/Index.html"><img src="../Website/images/logo.png" alt="#" width="265" height="149" border="0"></a></th>
    <th width="4" rowspan="2" scope="col">&nbsp;</th>
    <th height="91" colspan="8" scope="col"><marquee loop="infinite" behavior="scroll">
      <img src="../Website/images/transparent-banner.png" alt="#" width="1012" height="51" align="left">
      </marquee>
    </th>
  </tr>
  <tr>
    <th height="64" colspan="7" scope="col"><div id='cssmenu'>
        <div align="center">
          <ul>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li class='active'></li>
            <li><a href='../Website/Index.html'>Home</a></li>
            <li><a href='../Website/Prices and services.html'>Prices &amp; Services </a></li>
            <li><a href='../Website/Accessories.html'>Accessories</a></li>
            <li class='last'><a href='../Website/Contact Us.html'>Contact Us </a></li>
          </ul>
        </div>
      </div></th>
    <th width="305" height="64" scope="col"><script type="text/javascript">


var domainroot="www.martinwalkerflooring.com"

function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}

</script>
      <form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
        <p><br />
          <input name="q" type="hidden" />
          <input name="qfront" type="text" style="width: 180px" />
          <input type="submit" value="Search" />
          </div>
          &nbsp;</p>
      </form></th>
  </tr>
  <tr>
    <th height="20" colspan="10" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th height="395" colspan="10" align="center" valign="top" scope="row"><!-- TemplateBeginEditable name="Main Editable Region" -->
      <div align="center">Main Editable Region</div>
      <!-- TemplateEndEditable --> </th>
  </tr>
  <tr>
    <th height="59" colspan="10" scope="row">&nbsp;</th>
  </tr>
  <tr>
    <td width="318" height="24" nowrap scope="row"><div align="left">
        <p class="style1"><u>copyright and copy; 2015, Martin Walker Flooring. All rights to Martin Walker Flooring reserved</u></p>
      </div></td>
    <td>&nbsp;</td>
    <td width="108" nowrap><div align="center"><a href="../Website/Prices and services.html" class="style2">Prices and Services</a></div></td>
    <td width="55" nowrap><div align="center"><a href="../Website/Contact Us.html" class="style2">Contact Us</a></div></td>
    <td width="63" nowrap><div align="center"><a href="../Website/Accessories.html" class="style2">Accessories</a></div></td>
    <td width="34" nowrap><div align="center"><a href="../Website/Carpet.html" class="style2">Carpet</a></div></td>
    <td width="48" nowrap><div align="center"><a href="../Website/Laminate.html" class="style2">Laminate</a></div></td>
    <td width="27" nowrap><div align="center"><a href="../Website/Vinyl.html" class="style2">Vinyl</a></div></td>
    <td width="367">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Panda
  • 1,231
  • 18
  • 27
Steven Walker
  • 21
  • 1
  • 1
    I'm not sure if I am right here: Do you want to make your template fluid? So that the styles change depending on the screen size? – knigge Dec 22 '15 at 16:23

2 Answers2

1

Personally I would use CSS3 Media Queries found here http://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

example:

@media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float:none;
        width: auto;
    }
}

Whatever you set the pixel size to in "max-device-width: " will apply the below properties when your screen width reaches that size.

M.Bush
  • 1,102
  • 1
  • 12
  • 22
0

If you want to make beautiful responsive modern websites it is better to dont use a table to layout your page. Read the following articles if you want to know why: http://webdesign.about.com/od/layout/a/aa111102a.htm Why not use tables for layout in HTML?

I would recommend the following https://www.codecademy.com/learn/web course for learning to make webpage's without tables.

I agree with @Mauzal that the best way to make website responsive is through CSS3 Media Queries.

Community
  • 1
  • 1
joachimvs
  • 3
  • 3