Take a look at my code and tell why things don't work out please. The blue line should be on the bottom of the page. The body seems to be really small even though I used clear divs. If you find what went wrong please explain the solution. I'm new in coding so an explanation will be really useful to me. Thank you on advance.
#charset "utf-8";
/* CSS Document */
.clear {
clear:both;
}
.wrapper {
width:80%;
margin: 0 auto;
}
header {
margin-top:40px;
border-bottom:1px solid black;
padding-bottom:10px;
}
header img {
float:left;
width: 250px;
}
#socialmedia {
float:right;
padding:0;
margin-top:-2px;
}
#socialmedia li {
float:left;
list-style-type:none;
padding-left:10px;
}
li img {
width:40px;
}
#listmenu {
float:left;
margin-top:80px;
margin-right:5px;
}
#listmenu li {
display: block;
margin-bottom:40px;
font-family:Arial;
Font-size: 30px;
border-right:1px solid black;
}
#leftmenu li:first-child {
color:#3598db;
}
#right {
float:right;
width:60%;
}
#signupline {
background-color:#3598db;
height:50px;
width:auto;
}
button {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="logo.png" alt="logo"/>
<ul id="socialmedia">
<li><img src="facebook.png" alt="facebook" /></li>
<li><img src="twitter.png" alt="twitter" /></li>
<li><img src="youtube.png" alt="youtube" /></li>
</ul>
<div class="clear"></div>
</div>
</header>
<div id="leftmenu">
<div class="wrapper">
<ul id="listmenu">
<li>Home</li>
<li>What's e-friendship</li>
<li>Lanching Day</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="clean"></div>
</div>
</div>
<div id="right">
<h1>Welcome to e-Freindship</h1>
<p>e-Friendship is the new unbelievable website where you can make new friends from all over thr world. Reading is a complex cognitive process of decoding symbols in order to construct or derive meaning (reading comprehension). Reading is a means of language acquisition, of communication, and of sharing information and ideas. Like all languages, it is a complex interaction between the text and the reader which is shaped by the reader’s prior knowledge, experiences, attitude, and language community which is culturally and socially situated. The reading process requires continuous practice, development, and refinement. In addition, reading requires creativity and critical analysis. Consumers of literature make ventures with each piece, innately deviating from literal words to create images that make sense to them in the unfamiliar places the texts describe. Because reading is such a complex process, it cannot be controlled or restricted to one or two interpretations. There are no concrete laws in reading, but rather allows readers an escape to produce their own products introspectively. This promotes deep exploration of texts during interpretation.[1] Readers use a variety of reading strategies to assist with decoding (to translate symbols into sounds or visual representations of speech) and comprehension. Readers may use context clues to identify the meaning of unknown words. Readers integrate the words they have read into their existing framework of knowledge or schema (schemata theory).</p>
<div class="clear"></div>
</div>
<div id="signupline">
<p id="signuptext">Take your place and sign up</p>
<button>Sign Up</button>
</div>
</body>
</html>
Try move the clear div out of the right div:
<div id="right">...</div>
<div class="clear"></div>
Related
So I want it to float to the right, but I want the text and one image (which I haven't turned to links yet) to be in one line.
HTML code:
<html>
<title>Home - Welcome to Micro Skills!</title>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
<div id="header" class="header">
<div class="container">
<div class="logo">
<h1><img src="microskills_logo.jpg" width="275" height="106" alt="Logo - Micro Sills"></h1>
</div>
<div class="navBar">
<ul>
<b>
<li><img src="home_icon.jpg" width="256" height="256" alt="Home" class="home_icon"></li>
<li>About Us</li>
<li>Events</li>
<li>Get Involved</li>
<li>Contact Us</li>
</b>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Welcome to the Community MicroSkills Development Centre website.
Since 1984, we have been serving communities in the Greater Toronto Area. As a non-profit, charitable organization, we strive to achieve excellence in our service delivery to women, newcomers to Canada, youth and other community members who trust us to support them in improving their economic and social well-being.
Community MicroSkills Development Centre is a multi-cultural, non-profit, community based organization committed to assisting the unemployed, with priority to women, racial minorities, youth and immigrants. Recognizing barriers that immigrants, racial minority, youth and women face in their efforts towards self-sufficiency, MicroSkills aims to enable them to participate more fully in Canadian society and assist them in acquiring the skills needed to achieve self-determination and economic, social and political equality.
Our programs are designed to assist the unemployed, with priority to women, racial minorities, youth and immigrants achieve career and personal goals. Clients can choose as many services as required to help them on their way to becoming self-reliant and economically self-sufficient.</p>
</div>
</div>
</html>
CSS code:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
margin:auto;
}
.container{
width:85%;
margin:auto;
}
.header{
background-color:#900;
width:100%;
height:17%;
top:0;
position:fixed;
text-decoration:none;
}
.logo{
float:left;
}
.navBar{
float:right;
height: 10px;
}
li{
float:left;
margin-left:2%;
padding-top:20px;
color:#FFF;
text-transform:uppercase;
font-size:12px;
font-stretch:ultra-condensed;
padding-right:0;
}
.content{
padding-top:20%;
}
.home_icon{
height:50px;
width:50px;
}
I want the same positioning, but I want to move the text and image in the "navBar" slightly to the left to fit everything in one line.
You should add a width property to your .navBar CSS.
http://codepen.io/calebanth/pen/KrZBXo
.navBar {
float: right;
height: 10px;
width: 30%;
}
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
I am designing a website and I want the footer to have two small images on the bottom left side followed by #* (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.
At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.
I am using HTML and CSS on macromedia dreamweaver.
The current code is:
<div class="footer content">
<ul>
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li>#TWITTERADRESS</li>
<li>POSTAL ADDRESS </li>
<li>TEL NUMBER</li>
</ul>
</div> <!--end of footer-->
CSS
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
First of all edit the CSS as
.footer ul li {
display: inline; // in a straight line
}
Edit the HTML part as:
<div class="footer">
<ul>
<li class="image"><img src="Images/facebook.png" />
<img src="Images/twitter.png" /></li>
<li class="twitter">#TWITTERADRESS</li>
<li class="address">POSTAL ADDRESS </li>
<li class="number">TEL NUMBER</li>
</ul>
</div>
Edit the CSS part now as:
.image {
float: left; // float to the left
}
.number {
float: right; // float to the right
}
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/
maybe something like this:
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
.footer li{
float: left;
width: 25%;
}
From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):
<div id="wrapperdiv">
<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>
At this point we can write the CSS3 code (maybe at styles.css):
...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}
Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:
footer{
background:url(.../footer_bg.png) repeat_x;
width:...;
height:...;
margin:...;
}
#footerLogo_left {
float:left;
margin:...}
#footerMiddle_text {
float:left;
margin: (the same than left)}
#footerLogo_right {
float:right;
margin: (the same than left)}
Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).
I've been playing around with websites to figure out how they work. By downloading them and opening the in dream weaver cs6. But when I open the downloaded html file in my browser everything displays fine except the green background which is replaced with a default white one. Have a look.
http://www.bintrasher.com/index.html
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0036)http://www.bintrasher.com/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="./Bintrasher1_files/style.css">
<title>Bintrasher</title>
<style type="text/css"></style></head>
<body>
<div id="container">
<div id="top_banner"><img src="./Bintrasher1_files/dragons_den.gif" alt="dragons den"></div>
<div id="nav">
<ul>
<li>home</li>
<li>|</li>
<li>domestic</li>
<li>|</li>
<li>commercial</li>
<li>|</li>
<li>videos</li>
<li>|</li>
<li>shop</li>
<li>|</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="left_column">
<h1 class="header_home">Gain 40% more space in your wheelie bin!</h1>
<p>
Now with the Bin Trasher you can compact up to 40% of your waste to reduce overfilling and littering.
</p><p>
The sheer amount of waste produced by each household every week is increasing and the dangerous task of standing in your bin to squash your rubbish may be over!
</p><p>
We might just have the answer to your problem. The Bin Trasher is a simple gadget that compacts the waste and gives you 40% more space in your wheelie bin.
</p>
</div>
<div id="right_column"><p>Watch our demonstration video now…</p>
<object width="360" height="290"><param name="movie" value="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="290"></object>
</div>
</div>
<div id="footer">
<div id="col1">
<p>
<strong>Trade Enquiries Welcome</strong><br>
<strong>Tel:</strong> 059 91 57629<br>
<strong>Mobile:</strong> 087 206 9546<br>
<strong>Email:</strong> info#bintrasher.com</p>
</div>
<div id="col2">
<p>
<strong class="firstline">Great Value at only </strong><br>
<strong>€49.95</strong><br>
<strong class="lastline">Including VAT</strong>
</p>
</div>
<div id="col3"><img src="./Bintrasher1_files/buynow.gif"></div>
</div>
<p class="lower_left">Bin Trasher. 2010. All rights reserved </p>
<p class="lower_right">Terms & Conditions | Privacy Policy | Site Map<br>
<img src="./Bintrasher1_files/headers_26.gif"></p>
</div>
</body></html>
css:
#charset "UTF-8";
/* CSS Document */
img{border:0;}
body {text-align:center; margin:23px 0; background:url(../images/bgr.gif); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.4em;}
p a{color:#CC0000;}
p a:hover{color:#3c671e;}
#container {width:931px; margin-left:auto; margin-right:auto; text-align:left;}
#top_banner {height:149px; background:url(../images/top_banner.gif) bottom no-repeat; text-align:right;}
#nav {height:35px; background:url(../images/top_ban_bit.gif) no-repeat right #4a4a30; color:#FFFFFF;}
#nav ul{list-style-type:none; margin:0; padding:0 0 0 10px;}
#nav li{float:left; padding:6px 0.9em 0 0.9em; font-size:1.2em;}
#content{background:#FFFFFF; overflow:hidden; border-bottom:dotted 2px #006633;}
#left_column{ float:left; width:460px; padding:30px 30px;}
#right_column{margin-left:520px; padding:30px 20px;}
#footer{clear:both; background:#FFFFFF; overflow:hidden; padding:10px 20px 10px 30px; }
#footer div{float:left; width:33%;}
#col1 strong {color:#3c671e; text-transform:uppercase; font-weight:normal;}
#col2 strong {color:#5c8424; font-size:4em; line-height:1.2em;}
#col2 .firstline{color:#333333; font-size:1.6em;}
#col2 .lastline{font-size:1em; color:#333333;}
#col3 {text-align:right; padding-top:30px;}
.main_link {color:#FFFFFF; text-decoration:none;}
.main_link:hover, .selected{color:#669b41; text-decoration:none;}
p.lower_left{float:left; font-size:0.8em; color:#FFFFFF;}
p.lower_right{float:right; font-size:0.8em; color:#FFFFFF; text-align:right;}
.header_home{background:url(../images/heading_home.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
.header_industrial{background:url(../images/heading_industrial.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
There is probably a very easy answer because I'm very new to web development.
Thanks in advance.
instead of
background:url(../images/bgr.gif);
you need to write
background:url(http://www.bintrasher.com/images/bgr.gif);
A reference (the css file) is missing, I guess. Do you have the same file structure like on the server? I bet it will work then.