HTML below: (but JSfiddle had both HTML and CSS)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top1">
<div class="top1-left">
Welcome, Guest
Login
Sign up
</div>
<div class="top1-right">
Stay Updated
Subscribe via RSS
Email Updates
</div>
</div>
<div class="top2">
<div class="top2-text">
<span style="font-size:40px;">My Blog</span>
<span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span>
</div>
</div>
<div class="top3">
<div class="top3-text">
<span style="font-size:20px; margin-right: 40px;">HOME</span>
<span style="font-size:20px; margin-right: 40px;">ABOUT</span>
<span style="font-size:20px; margin-right: 40px;">BLOG</span>
<span style="font-size:20px; margin-right: 40px;">CONTACT</span>
</div>
</div>
</body>
</html>
https://jsfiddle.net/fsf90593/
My question is why the text in the "top3" div not floating to the left just like the other divs? I pretty much have the same css and html code for that div. Probably a simple answer but I am pretty new to the html css world, please help.
Try to add clear: both; on div.top3-text
CSS:
div.top3-text {
float: left;
line-height: 70px;
padding-left: 60px;
clear: both;
}
It will clear top3-text after top2-text and allow it to appear below the top2-text
Try this: Just adding a div with a class 'clear' and style that class with 'clear: both'
div.top1{
background-color: darkgreen;
height: 40px;
}
div.top1-left{
float: left;
padding: 10px 0px 5px 60px;
color: white;
}
div.top1-right{
float: right;
padding: 10px 30px 5px 0px;
color: white;
}
div.top2{
background-color: #247424;
height: 150px;
}
div.top2-text{
float: left;
color: white;
padding-left: 60px;
line-height: 150px;
}
div.top3{
height: 70px;
background-color: #81EE81;
}
div.top3-text{
float: left;
line-height: 70px;
padding-left: 60px;
}
a{
color: #82B62E
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top1">
<div class="top1-left">
Welcome, Guest
Login
Sign up
</div>
<div class="top1-right">
Stay Updated
Subscribe via RSS
Email Updates
</div>
</div>
<div class="top2">
<div class="top2-text">
<span style="font-size:40px;">My Blog</span>
<span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span>
</div>
</div>
<div class="clear"></div>
<div class="top3">
<div class="top3-text">
<span style="font-size:20px; margin-right: 40px;">HOME</span>
<span style="font-size:20px; margin-right: 40px;">ABOUT</span>
<span style="font-size:20px; margin-right: 40px;">BLOG</span>
<span style="font-size:20px; margin-right: 40px;">CONTACT</span>
</div>
</div>
</body>
</html>
Related
I am trying to center an item in the middle of the layout while also, if possible have ability to control its position if need be with minor css tweaks. In my layout page I cannot figure out why the item I want in the middle of the screen both horizontally and vertically is positioned to the left of the screen. I know the issue is something in my layout I just can't seem to find out what the issue is. Below is a basic version of my layout with the item I can trying to center.
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
.layoutPage {
min-height: 95%;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding-bottom: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
}
.appRoundedShadow {
display: inline-block;
height: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<br />
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
I want to center the entire appRoundedShadow div
You've got to do a couple things here. First, remove the <br> that's currently below the .headerImage div, because it's adding extra space that makes the .headerImage appear like it's not centered vertically.
Then, add the following for .appRoundedShadow:
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
Then, make the padding consistent around .bodyContainer (replace it's padding-bottom with padding).
Finally, remove the min-height on the .layoutPage. Let the div's contents determine the height instead.
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
position: relative;
}
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
To center your report add this style...
.bodyContainer {
text-align: center;
}
You can give the element you wish to center 'display:block' and 'margin:auto'
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
.layoutPage {
min-height: 95%;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding-bottom: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
}
.appRoundedShadow {
display: block;
height: auto;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<br />
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
Take display: inline-block off .appRoundedShadow and you're done.
I'm trying to design a chat window with messages from the user on the right and messages from the other person on the left. At first, I tried doing this without floats and failed. Doing some research I found that this was usually done using floats. I rewrote it using floats but it still isn't working.
Update: Are floats the best solution for this type of design?
.user {
float: right;
background-color: deepskyblue;
margin-right: 20px;
font-size: 25px;
color: white;
}
.friend {
float: left;
background-color: orchid;
margin-left: 20px;
font-size: 25px;
color: white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div contenteditable="true" class="user clearfix">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend clearfix">
No I did not.
</div>
<div contenteditable="true" class="user clearfix">
Is it working?
</div>
<div contenteditable="true" class="friend clearfix">
NO :(
</div>
</body>
</html>
Is this? I removed ::after
.user {
float: right;
background-color: deepskyblue;
margin-right: 20px;
font-size: 25px;
color: white;
}
.friend {
float: left;
background-color: orchid;
margin-left: 20px;
font-size: 25px;
color: white;
}
.clearfix {
clear: both;
display: table;
margin:5px 0;
}
<div contenteditable="true" class="user clearfix">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend clearfix">
No I did not.
</div>
<div contenteditable="true" class="user clearfix">
Is it working?
</div>
<div contenteditable="true" class="friend clearfix">
NO :(
</div>
are floats best solution?
I think that's relative to the developer and situation. There is no 'wrong' way, if that's what you are asking. But there are ways that help you in the long run if you want to be flexible and add more features. Here is an example using flex properties:
body {
background-color: snow;
display: flex;
flex-flow: column nowrap;
}
body div {
font-size: 18px;
padding: 10px;
color: white;
border-radius: 5px;
}
.user {
background-color: deepskyblue;
align-self: flex-end;
}
.friend {
background-color: orchid;
align-self: flex-start;
}
<body>
<div contenteditable="true" class="user">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend">
No I did not.
</div>
<div contenteditable="true" class="user">
Is it working?
</div>
<div contenteditable="true" class="friend">
NO :(
</div>
</body>
I wrote a responsive footer as shown in screen shot:
The text HELP and back icon aren't floating to left, but are struck in middle. How can I move it to left?
Here is the code:
HTML code:
<div id = "footer">
<span id = "logout" class="pull-right">
<span id = "logoutIcon"></span>
<span id = "logoutText">
LOGOUT
</span>
</span>
<span id = "logout1" class="pull-right">
<span id = "logoutIcon1"></span>
<span id = "logoutText1">
HELP
</span>
</span>
</div>
CSS code::
#footer {
background-color: #125e9a;
bottom: 0;
height: 5%;
position: absolute;
width: 100%;
}
#logout1 {
display: block;
height: 100%;
margin-left: 3%;
padding: 2.5%;
width: 30%;
}
#logoutIcon1 {
background-image: url("../JunosImages/mob/back-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
float: left;
height: 14px;
margin-top: 2%;
width: 10px;
}
#logoutText1 {
color: #fff;
float: left;
font-size: 14px;
font-weight: 600;
margin-left: 7%;
}
You pulled right both buttons. Just replace pull-right class with pull-left in the second button and swap these buttons.
Also don’t use ID selectors in CSS.
are u use bootstrap so please check the below ans...
class="pull-left";
i would do it like this:
<!DOCTYPE html>
<html>
<head>
<style>
.footer {
background-color: #125e9a;
bottom: 0;
height: 5%;
position: absolute;
width: 100%;
}
.footer-links{
display: block;
float:left;
margin-left: 3%;
padding: 0.5%;
width: 98px;
}
.arrow{
background-color: green;
height: 14px;
margin-top: 2%;
width: 10px;
}
.footer .button-text{
color: #fff;
font-size: 14px;
font-weight: 600;
margin-left: 7%;
}
.footer-links-wrapper{
width: 215px;
}
</style>
</head>
<body>
<div id="footer" class="footer">
<div class="footer-links-wrapper">
<span id="help" class="pull-left footer-links">
<span id="left-arrow" class="arrow left-arrow"> << </span>
<span id="help-text" class="button-text">
HELP
</span>
</span>
<span id="logout" class="pull-right footer-links">
<span id="logout-text" class="button-text">
LOGOUT
</span>
<span id="right-arrow" class="arrow right-arrow"> >> </span>
</span>
</div>
</div>
</body>
</html>
always better to write styles in classes and not by id
use "=" in attributes without spaces
name of classes and ids have to explain what you do (one way of comments)
in your code missing other styles, for look what you did in local browser
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/
this is for sure a noobish html question, because i am new at this stuff.
Anyways lets get to it:
1st, check the fiddle:
http://jsfiddle.net/d6767uur/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="frontpage.css" rel="stylesheet">
</head>
<body>
<div class="navBar">
<div class="greyline"> </div>
<div class="menu"> smoothies </div>
<div class="greyline"> </div>
<div class="menu"> milkshakes </div>
<div class="greyline"> </div>
<div class="menu"> juicy facts </div>
<div class="greyline"> </div>
<div class="menu"> about us </div>
<div class="greyline"> </div>
<div class="stuffwithsmall"> © All rights reserved.. </div>
</div>
<div class="frontWrapper">
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>
</div>
</body>
</html>
CSS:
#font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }
body {
margin: 0px;
padding: 0px;
}
.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A; //hover = 398a20
}
.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}
.menu {
font-family: 'SourceSansPro-Regular';
color: white;
font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}
.menu:hover {
background-color: #398a20;
}
.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}
Question: why is that header going down below the main menu, and how do i change it, so that it goes to the right of the menu?
Your navbar div goes down that far because .stuffwithsmall class is inside it and has a huge margin-top. You can fix that by moving it lower, after the closing tag of navbar div.
In css, change:
.navbar {
height: auto;
width: 100%;
}