When I am using the CSS float Property its working partly perfect
as we can see in the HTML that ID #contact float perfect in the right side but the ID #workExperiance should be below the full name in normal order how to do that its also floating.
Require detailed explanation
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
.main {
color: #4EC5C1;
}
#name {
float: left;
}
#contact {
float: right;
list-style-type: none;
}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa#gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
</body>
</html>
add div{float:left; width:100%;} it'll work
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
div{float:left; width:100%;}
.main{color: #4EC5C1;}
#name{float:left;}
#contact{float:right;list-style-type:none;}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa#gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
<section id="workExperiance">Work Experience</section>
</body>
</html>
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
.main{color: #4EC5C1;}
#name{float:left; display:block;}
#contact{float:right;list-style-type:none; width:50%; padding:0; display:block}
#workExperiance{
float:left;
display:block;
}
#left{
width:40%;
float:left;
}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<div id="left">
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section> <section id="workExperiance">Work Experience</section></div><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa#gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
</body>
</html>
Always use display:block and special width when floating
Use clear: both Read more about Clear
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. The clear property applies to both floating and
non-floating elements.
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
section#workExperiance {
clear: both;
}
.main {
color: #4EC5C1;
}
#name {
float: left;
}
#contact {
float: right;
list-style-type: none;
}
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa#gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
P.S: And better use div in this case and no need to use section. Normally section use for parent wrapper.
Related
i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
I'm trying to create a banner with a background color of gray, for example. I want this banner to include the logo and the menu options.
I figure that I must have three div's, but when I put the logo and the menu options in it, I get it as three separate things, versus two things that are in one container.
Also, if someone would be so kind to critique my code, I would appreciate it so I improve.
Thank you in advance.
div.header_container {
font-family: tamarillo-jf, sans-serif;
font-style: normal;
font-weight: 400;
border: solid blue 10px;
}
div.logo_container {
border: solid red;
float: left;
}
h1.logo {
padding: 10px;
margin: 0;
color: forestgreen;
font-family: tamarillo-jf, sans-serif;
font-style: normal;
font-weight: 400;
}
div.nav_container {
border: solid pink;
float: right;
overflow: auto;
margin: 0;
}
li.option {
display: inline;
padding: 10px;
list-style-type: none;
font-size: 25px;
margin: 0;
}
a {
text-decoration: none;
color: forestgreen;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Home | Business</title>
<link rel = "stylesheet" href = "style.css">
<!--fonts-->
<script src="https://use.typekit.net/yhm2vpr.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body class = "home_page">
<!-- "banner" with logo and navigation options -->
<div class = "header_container">
<div class = "logo_container">
<h1 class="logo">Business Name</h1>
</div>
<div class = "nav_container">
<ul class = "nav_ops">
<li class = "option">about us</li>
<li class = "option">classes</li>
<li class = "option">services</li>
<li class = "option">get involved</li>
<li class = "option">contact us</li>
<li class = "option">donate</li>
</ul>
</div>
</div>
<p>Hello, there!</p>
</body>
</html>
You have two options that I can see
Option 1 - Add this after the nav_container within the header_container
//html
<br class='clear'/>
//Styles
.clear {
clear: both;
}
Option 2 - Remove the floats from the logo_container and nav_container and use the flex property on the header_container
.header_container {
display:flex;
justify-content: space-between;
align-items: center;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I made a simple search engine, all works well except for the design aspect. On the PC, the buttons appear top central but as soon as we get the design up on a phone, buttons are top right.
Applied one change, this is the updated version.
Phone: Android, Samsung Galaxy S4, 5 Inch 1080x1920
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search</title>
<style>
*{margin:0px;
padding:0px;
}
#menu {
height:38px;
padding-top:0px;
background-color:white;
margin-left: auto
margin-right: auto
}
.photo {
position:relative;
font-family:arial;
overflow:hidden;
border:0px;
width:811px;
height:98px;
margin-left:250px;
}
.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:50px;
width:816px;
opacity:0.6;
}
.photo .heading {
top:-50px;
}
.photo .caption {
bottom:-42px;
left:3px;
}
.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#FF0;
font-size:16px;
display:block;
padding:5px 10px 0 10px;
}
.footer {
font-family: Calibri;
font-size: 18px;
color: #000;
}
head {
text-align: center;
}
menu1 {
text-align: center;
}
.footer a {
text-align: center;
}
.menuhead {
font-family: Calibri;
}
.menuhead {
font-size: 24px;
}
.menuhead {
font-size: 18px;
}
.footer1 {
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu"><ul id="MenuBar1" class="MenuBarHorizontal">
<li>Books </li>
<li>Add Url</li>
<li>About Us</li>
<li>Contact Us</li>
</ul></div>
<p><center>
<p class="menuhead"><br>
</p>
<br>
</center>
</div>
<center>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<img src="images/img2.png" width="817" height="110">
</center>
<form action="/search/search.php" method='GET'>
<center>
<p><br>
</p>
<p> </p>
<p>
<input name='search' type='text' class="footer1" size='50'></font></p>
<p> </p>
</center>
<p class="footer1"><center>
<input name='submit' type='submit' class="footer1" value='Search Now'>
</center>
</p>
</form>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1">
<p class="footer1">
<p class="footer1">
<center>
<g:plusone size="tall" annotation="i0nline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</center></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Take a look at my fiddle, the blue box is your old menu and the red box is my new menu.
https://jsfiddle.net/mykx37n9/4/
see how the red box stays centered, I used margin-left: auto margin-right: auto
#menu-2 {
height:38px;
width: 50px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
You had your margin set to a fix sized, by changing it to auto it is now a relative size based off screen width.
EDITED FOR UPDATED QUESTION
Use this:
#menu {
height:38px;
padding-top:0px;
background-color:white;
text-align: center;
}
Here is the fiddle http://jsfiddle.net/28m3fpcv/6/
Also, remove this css, it is not valid:
head {
text-align: center;
}
menu1 {
text-align: center;
}
changed the line left: 500px to left: 50%;
#menu {
height:38px;
padding-top:0px;
background-color:white;
position: absolute;
top: 19px;
left: 50%; /* here it is */
margin-right: -50%; /* also this might be causing problem so try removing this line */
transform: translate(-50%, -50%) }
}
you can use this way to make your menu items align horizontally -
#menu ul li {
display: inline-block;
margin: ; /* add any margin you need between those buttons */
}
and to center the whole menu use the above method I described by removing margin-right: -50% OR go with margin: 0 auto; as suggested by others.
How do i left and right align text on multiple lines, e.g.:
┌─────────────────────────────────────┐
│ Tums 29 │
│ Oxydativedecarboxilization ATP │
│ appdata C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘
e.g.:
Note: A single-line variant of this question has been asked before
Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
<UL>
<LI class='line1'><P class='left'>Tums<P class='right'>29
<LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
<LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</UL>
<DIV>
<P class='left'>Tums<P class='right'>29
<P class='left'>Oxydativedecarboxilization<P class='right'>42
<P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</DIV>
</BODY>
</HTML>
Which renders incorrectly as:
Desired rendering:
Bonus reading
HTML/CSS - Right and left align on the same line?
Cross-browser CSS for left align and right align on the same line
You just have to clear your floats. http://jsfiddle.net/P7KuB/2/
<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.wrap { clear:both; }
<DIV>
<P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
See: http://jsfiddle.net/thirtydot/HkybR/2/
HTML:
<div class="info">
<div>
<span class="left">Tums</span><span class="right">29</span>
</div>
<div>
<span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
</div>
<div>
<span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
</div>
</div>
Could probably be more semantic.
CSS:
.info {
margin: 16px;
padding: 8px;
background: #fff;
float: left;
font-size: 21px;
clear: both;
}
.info > div {
overflow: hidden;
text-align: right;
}
.info .left {
float: left;
padding-right: 10px;
}
<UL style="list-style-type: none;">
<LI class='line1'>Tums<div class='right'>29</div></LI>
<LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
<LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>
Renders as...
You may also need to change the margins of the UL element.
EDIT: I guess the clear method is a more elegant solution!
Your test case was way too complicated. Here is a working multi-line version:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear:both;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
</DIV>
</BODY>
</HTML>
CSS add
p, li { overflow:hidden; }
Example : http://jsbin.com/asulih/
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.