I have a page that I am trying to write. I want a header, footer three columns that are 20% 60% 20%. I am trying to use html5. This code works with firefox but IE the div tag is way at the bottom. andriod the left over laps, chrome shows the div at the bottom. I cannot figure out what I am doing wrong. The example is here.
<html>
<header>...</header>
<section>
<nav>buttons below the header not to exceed 20% align left
</nav>
<div>
</div>
<style>
header {
background-color:#744626;
color:#41200b;
text-align:center;
padding:0px;
height:186px;
}
nav {
line-height:30px;
background-color:#fbf2dc;
height:1947px;
width:200px;
float:left;
padding:10px;
}
section {
width:600px;
float:left;
padding:10px;
background-color:#fbf2dc;
height:2000px;
vertical-align:top;
}
aside{
width:300px;
float:right;
padding:0px;
background-color:#fbf2dc;
height:2000px;
}
footer {
background-color:#fbf2dc;
color:#41200b;
clear:both;
text-align:center;
padding:5px;
}
body {
background-color:#fbf2dc;
color:#41200b;
}
img {
display: block
}
.Normal-C17
{
font-family:"Trebuchet MS", sans-serif; font-weight:700;
font-size:15.0px; line-height:30px; color:#0000ff;
text-align:center;
}
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid #744626;
}
</style>
</section>
<aside>s</aside>
<footer>be centered and be the bottom 10% of page</footer>
</html>
You can try out Fluid Layout feature. Link below CSS files which are highly customizable. It is having a good feature in which the web page can adjust in mobile, tablet or a desktop i.e. responsive.
Try them out and customize, I just uploaded them. (If you have not used fluid feature in Adobe Dreamweaver before.)
link to styles.css file : https://www.dropbox.com/s/8r5pb2uvexf0nw9/styles.css?dl=0
link to boilerplate.css file : https://www.dropbox.com/s/rzy6w848s0ndedi/boilerplate.css?dl=0
I hope above steps helps you
Related
I'm working on the beginnings of an html web page with an external css file. It appears to work fine on my laptop, but when I zip all the files together to email it, the css code no longer displays on the web page. I believe I have the html page associated with a relative link, so I'm not sure why it's not working. All of the files are in the same folder and they display correctly on my end before zipping the folder.
Html code for external css
<link rel="stylesheet" type="text/css"
href="AlphaOmegaCSS.css">
css code
/*====================================================================
Primary Background style
====================================================================*/
a
{
color:white;
padding:18px;
}
/*====================================================================
Main Body style
====================================================================*/
body
{
background-color:#666;
font-family:aria, georgia;
font-size:18px;
font-weight:bold;
}
body.main
{
background-image:url(edit.jpg);
background-position:99% 0%;
background-repeat:no-repeat;
background-size:319px 200px;
}
/*====================================================================
div-menu-container
====================================================================*/
div.menu
{
background-color:#666;
clear:both;
color:white;
margin:0px auto;
padding:15px;
text-align:center;
width:56%;
}
div.container
{
margin:0px auto;
width:100%;
}
div.FirstPanel
{
background-color:#777;
color:white;
float:left;
height:1000px;
padding:10px;
width:48%;
}
div.SecondPanel
{
background-color:#flflfl;
color:black;
float:left;
height:1000px;
padding:10px;
width:48%;
}
div.footer
{
background-color:#ccc;
clear:both;
color:white;
padding:15px;
width:99%;
}
/*====================================================================
Heading styles
====================================================================*/
h1
{
font-size:56px;
text-align:center;
}
h2
{
color:white;
background-color:#ccc;
font-size:35px;
padding:4px;
}
h3
{
background-color:#ccc;
color:white;
font-size:25px;
padding:18px;
text-align:center;
}
/*====================================================================
picture styles
====================================================================*/
img
{
padding:20px;
}
/*====================================================================
background 2 styles
====================================================================*/
background 2
{
background-color:white;
font-size:32px;
font-weight:bold;
padding:10px;
width:600px;
}
/*====================================================================
Labeled style
====================================================================*/
labeled
{
display:inline-block;
font-size:28px;
width:600px;
}
/*====================================================================
Map style
====================================================================*/
#mapLeaflet
{
margin:20px auto;
}
/*====================================================================
Wording style
====================================================================*/
p, li
{
color:white;
font-size:24px;
padding:4px;
}
/*====================================================================
Button style
====================================================================*/
.fieldsetStyle
{
background-color:#flflfl;
padding-left:40px;
width:25%;
}
.formButtonStyle
{
background-color:#666;
color:white;
font-size:30px;
font-weight:bold;
margin:20px;
padding:20px;
width:400px;
}
.radioButtonStyle
{
width:80px;
}
File names might change when downloading since there could be many copies of the same file. Try making sure that you refer to the same css file in your html file after downloading. But this shouldn't occur if you're using the relative path to the css file.
For example instead of an absolute path like this,
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
Try to use a relative path like this,
<img src="/images/picture.jpg" alt="Mountain">
And to rephrase what chris said, links to a compressed file will not work.
I'm have a wordpress site where I have three buttons with position:fixed in the right side. The buttons show fine in FF and IE, but disappears behind the next section when I scroll in google chrome. I am pretty sure it is a stacking context problem, but can not make the button appear no matter which value I change. HTML and css below( the theme uses visual composer, if that is any help:)
.button_fixed{
position:fixed;
right:0;
top:35%;
z-index:99999999;
}
.button_fixed a{
border:3px solid #f37121;
border-radius:8px 0 0 8px;
background:rgba(0,0,0,0.4);
display:block;
border-right:0;
color:white;
margin-bottom:25px;
padding:10px;
font-family: 'Deftone Stylus';
font-size:35px;
width:150px;
position:relative;
}
span.oswald{
font-family: Oswald;
font-size:25px;
text-transform:uppercase;
displaY:inline-block;
padding-top:5px;
}
HTML:
<div class="button_fixed">
sell <br/><span class="oswald">equipment</span>
buy <br/><span class="oswald">equipment</span>
outsource <br/><span class="oswald">my sales</span>
</div>
site url: http://tinyurl.com/q9yangh
Thanks a lot for the help.
For #top add overflow: visible
I'm new to HTML/CSS and am in the process of learning it in hopes of transferring the knowledge to running an online newspaper that I am the editor of. Currently, I am working on my own website which has an image rollover on it. I have run into the issue where the rollover works perfectly, but I cannot move it left or right or up and down. For each new rollover I add, they will just stack one underneath the other all the way down the page. How do i solve this issue and be able to position the rollover around the page as if it were a normal picture. Below it the code. Thanks in advance.
if you notice any other discrepancies that i need to fix, I would gladly appreciate it.
the body
<div id="Chasity">
<img src="http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png"onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/Chasitytitle2_zps8b7679b9.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png'" />
and css
body {
{block:IfNotDarkLayout}
width:100%;
height:100%;
color: #333;
color: rgba(0,0,0,.9);
{/block:IfNotDarkLayout}
{block:IfDarkLayout}
color: #fcfcfc;
color: rgba(255,255,255,.9);
{/block:IfDarkLayout}
background: {color:Content Background};
font-family: "Century Schoolbook", Century, Georgia, serif;
text-shadow: 0 0 1px {color:Content Background};
}
.Chasity{
left:300px;
top:400px;
position:fixed;
padding-top:10px;
padding-right:50px;
{CustomCSS}
simply use the div:hover selector to change the image and then you can move it wherever you want, see my example here
html:
<a href="http://google.com">
<div class="box"></div>
</a>
css:
a{
display:block;
padding:0;
width:200px;
height:500px;
margin:auto;
}
.box{
background:url('http://placekitten.com/200/500');
display:block;
height: 100%;
width:100%;
margin:auto;
}
.box:hover{
background:url('http://placekitten.com/200/501');
}
http://jsfiddle.net/KLxUy/
I create Any div in auto width with single image background. in act this worked but There is a small problem. end of right images not overlapped.
HTML :
<div class="home"><span><em>40</em></span></div>
CSS :
.home{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:34px; display:inline-block;
}
.home span, .home em{
display:inline-block;
height:40px;
line-height:34px;
margin:0;
color:#954b05;
}
.home span{
padding-left:15px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0;
}
.home em{
font-style:normal;
padding-right:20px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}
See E.X In Action : HERE
My Problem : HERE
It's doing that because the corners of your PNG are transparent. Either make them white (same as background) or use another method. Most modern browsers allow you to do rounded borders via CSS now (with the exception of IE).
you can make the same curve box as per your image with css3 here is small css for you to make curve box and compatible with all browsers:-
.box {
border:1px solid #dadada;
width:50px;
height:50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}
check the live demo:- http://jsfiddle.net/ZysQa/3/
i have used behavior hack for ie support border radius property so for ie border details you can read this article.....cross browsers css3 border radius
I have a photo gallery and my photos are diplayed as thumbnails.
When I resize the browser they move as I want them to but instead of getting evenly pushed down on to the next line they instead go down but overlap oeach other.
When the browser is full, the images display fine. Here is a screenshot showing the images moved and overlapping when the browser is smaller:
I currently use this code if it helps.
div.photoimg
{
margin:2px;
padding: 5px;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img photoimg
{
display:inline;
margin:3px;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:200px;
margin:2px;
}
Many thanks for any help.
I am not sure, but try instead of
div.img photoimg { display:inline; }
use
div.img photoimg { display:block; }