Need help with creating a fluid template on dreamweaver
hi there, have few questions in regards site.
1) having trouble creating fluid layout/ template (header , footer) fits both screen of phone , laptop. header, style sheet set
#fsbg {
left: 0%;
right: 0%;
width: 100%;
height: 100%;
padding-top: 0;
however, when opened on ipad/ phone, header never 100% width of screen. same goes footer. site follows: www.beyondmyborder.com
2) possible create template mobiles on dreamweaver same site? want different templates adapted different devices website opened on, can't seem find specific information on how should go it.
3) recommended font size site can adjust phone screens? font size on desktops, way small phone screens. how can change adapt different devices?
sorry messy coding, beginner, can tell. thank in advance!
that's sort of train wreck isn't it?
[invalid] markup validation of http://www.beyondmyborder.com/ - w3c markup validator
my advice start on responsive framework bootstrap. also, use html5 doc type. it's current web standard , works best on modern mobile devices.
bootstrap starter page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 3.3.6 starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--html5 older ie browsers-->
<!--[if lt ie 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body {padding-top: 10px}
.center-block {float:none}
.carousel img {width:100%}
</style>
</head>
<body>
<!--begin navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html">websitename</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html" class="glyphicon glyphicon-home"> home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</div>
</div>
</nav>
<hr>
<!--alternate image mobile devices-->
<div class="visible-xs">
<img class="img-responsive" src="http://lorempixel.com/900/300/nature/1" alt="...">
</div>
<!--begin bootstrap carousel-->
<div id="mycarousel" class="carousel slide hidden-xs" data-ride="carousel" data-interval="5200">
<!-- indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<!-- wrapper slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1180/400/nature/4" alt="...">
<div class="carousel-caption">
<h3>heading 3</h3>
<p>details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1180/400/nature/3" alt="...">
<div class="carousel-caption">
<h3>heading 3</h3>
<p>details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1180/400/nature/2" alt="...">
<div class="carousel-caption">
<h3>heading 3</h3>
<p>details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1180/400/nature/1" alt="...">
<div class="carousel-caption">
<h3>heading 3</h3>
<p>details....</p>
</div>
</div>
<!--end active-->
</div>
<!-- left , right controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">next</span> </a>
<!--end carousel--></div>
<!--begin content-->
<section class="container" id="content">
<div class="row">
<div class="col-sm-6 col-md-3">
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
</div>
<div class="col-sm-6 col-md-3">
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
</div>
<div class="col-sm-6 col-md-3">
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
</div>
<div class="col-sm-6 col-md-3">
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
</div>
</div>
</section>
<hr>
<!--footer-->
<section class="container-fluid">
<footer class="row">
<div class="text-center">
footer goes here...
</div>
</footer>
</section>
<!--latest jquery core library-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment