Here is my HTML Code:
<body>
<img id="logo" src="logo.png">
<br>
<!-- Start: Page Buttons -->
<div align="center" id="buttonBar">
<div class="menuButton" >
Home
</div>
<div class="menuButton" >
Author
</div>
<div class="menuButton" >
Literature
</div>
<div class="menuButton" >
Projects
</div>
<div class="menuButton" >
Pictures
</div>
<div class="menuButton" >
How To...
</div>
<div class="menuButton" >
Updater
</div>
<div class="menuButton" >
Copyright
</div>
</div>
<!-- End: Page Buttons -->
<h2>Welcome</h2>
</body>
And here is my CSS:
#buttonBar{
position: fixed;
width: 100%;
z-index=1;
padding-top: 65px;
}
.menuButton{
height: 50px;
width: 125px;
background-color: lightblue;
display:inline-block;
text-align: center;
line-height: 50px;
margin-left: 5px;
border-radius: 10px;
}
.menuButtonText{
font-size: 25px;
text-align: center;
line-height: 50px;
color: black;
text-decoration: none;
}
#logo{
padding-top: 15px;
padding-left: 15px;
}
The h2 I have in my HTML, will for some reason go under the logo(img) but is staying above the div's. How do I get my H2, and for anything else I put, under the Div's?
I have created you a fiddle to solve your problem: http://jsfiddle.net/vwqk411e/2
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
<h2>Hello</h2>
</div>
CSS
#container {
margin-top: 100px;
}
nav {
width: 100%;
position:fixed;
border-bottom: 1px solid grey;
top: 0;
left: 0;
background-color:#fff;
}
ul {
width: auto;
}
li {
display:inline-block;
float:left;
padding: 10px;
margin: 3px;
border: 1px solid red;
}
Change the beginning markup to this:
<div align="center" id="buttonBar">
<div style="text-align: left; padding:0 0 15px 15px; vetical-align: top;"><img id="logo" src="logo.png"><br></div>
<div class="menuButton" >
Home
</div>
Modify your css to this:
#buttonBar{
position: fixed;
width: 100%;
top: 0;
left; 0;
background: #fff;
}
You can pull the inline styling I made into the css, and adjust the padding for the image to your specification.
Related
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
I'm new to .html, self taught, finishing up a website but I'm having some issues with my header.
I have some text that scales on hover, but if part of the text is obscured by the header the text will scale and appear on top of the header, how do I fix this?
I've included a snippet to show what I mean.
/************************** Header *******************/
header {
min-height: 150px;
background: #ccc;
position: fixed;
width: 100%;
}
header ul{
display: inline;
text-align: left;
}
header ul li{
margin-left: 0px;
padding: 2px;
}
header ul li:first-child{
margin-left: 0px;
padding: 2px;
}
header ul li:last-child{
margin-bottom: 30px;
padding: 2px;
}
.spacer{
height: 150px;
}
/********************* Table & Buttons ******************/
.select{
height: 100%;
background-color: #f2f2f2;
padding-top: 35px;
padding-bottom: 35px;
}
.category {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
height: 10%;
background-color: #f2f2f2;
text-align: center;
font-size: xx-large;
}
.mb, .ce{
width: 50%;
}
.mb{
border-right: 2px solid #2F4858;
}
.mb:hover, .ce:hover{
transform: scale(1.1);
transition: transform .2s;
}
.sub{
text-align: center;
font-size: x-large;
width: 100%;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.spacer2 {
height: 140px;
background: #f2f2f2;
}
<header>
<nav>
<ul>
<li>
<a>Home</a>
</li>
<li class="current">
Portfolio
</li>
<li>
<a>About</a>
</li>
<li>
<a>Contact / Services</a>
</li>
</ul>
</nav>
</header>
<section class="spacer">
</section>
<seciton>
<div class="sub">
<p> Links </p>
</div>
<div class="select">
<table class="category">
<tr>
<td class="mb" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number One</p>
</button>
</td>
<td class="ce" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number Two</p>
</button>
</td>
</tr>
</table>
</div>
</seciton>
<section class="spacer2">
</section>
Using z-index on your header and yours section (be carefull you have wrote seciton one time) did the trick:
/************************** Header *******************/
header {
min-height: 150px;
background: #ccc;
position: fixed;
width: 100%;
z-index: 1; /* ---Set a z-index here--- */
}
header ul{
display: inline;
text-align: left;
}
header ul li{
margin-left: 0px;
padding: 2px;
}
header ul li:first-child{
margin-left: 0px;
padding: 2px;
}
header ul li:last-child{
margin-bottom: 30px;
padding: 2px;
}
.spacer{
height: 150px;
}
/********************* Table & Buttons ******************/
.select{
height: 100%;
background-color: #f2f2f2;
padding-top: 35px;
padding-bottom: 35px;
}
.category {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
height: 10%;
background-color: #f2f2f2;
text-align: center;
font-size: xx-large;
}
.mb, .ce{
width: 50%;
}
.mb{
border-right: 2px solid #2F4858;
}
section {
z-index: 0; /* ---And another here that is lower--- */
}
.mb:hover, .ce:hover{
transform: scale(1.1);
transition: transform .2s;
z-index: 0;
}
.sub{
text-align: center;
font-size: x-large;
width: 100%;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.spacer2 {
height: 140px;
background: #f2f2f2;
}
<header>
<nav>
<ul>
<li>
<a>Home</a>
</li>
<li class="current">
Portfolio
</li>
<li>
<a>About</a>
</li>
<li>
<a>Contact / Services</a>
</li>
</ul>
</nav>
</header>
<section class="spacer">
</section>
<section>
<div class="sub">
<p> Links </p>
</div>
<div class="select">
<table class="category">
<tr>
<td class="mb" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number One</p>
</button>
</td>
<td class="ce" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number Two</p>
</button>
</td>
</tr>
</table>
</div>
</section>
<section class="spacer2">
</section>
⚠️I really recommand you to wrap all your content that is not in the header in a <main></main> component to easily write this type of cleaner css rules:
header {
z-index: 1;
}
main{
z-index: 0;
}
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}
I have image on the center of the page .
I want to display block of text inside the <div class='contain'> which will be float left to the image. 10px between the image to <div class='contain'>.
I don't want to move the image ,I want to image will stay in the center and just in the right side i put the <div class='contain'>.
I add property clear:both; to image or to the div and I think that I don't know how to use it.
jsfiddle Demo
how can I do that?
Thx
my code:
<h1><a id="toptitle" href="http://www.centerwow.com">portfolio</a></h1>
<div id="container">
<div id="all_pages">
<div class="page">
<h1>Home Page</h1>
<img src="images/yellow_flowers.jpg" width="300px" height="300px">
<div class='contain'>this is the home page bla bla bla</div>
</div> <!-- page1 -->
<div class="page">
<h1>About Us Page</h1>
<img src="images/Pink_Flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
<div class="page">
<h1>Contact Us Page</h1>
<img src="images/green_flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
</div> <!-- #all_pages -->
</div> <!-- #container -->
<div id="menu">
<ul>
<li id="1" class="link CC3366 active">Home</li>
<li id="2" class="link 33FF66">About</li>
<li id="3" class="link FFFF33">Contact Us</li>
</ul>
</div> <!-- #menu -->
<div id="footer"><a class="link" href="http://www.centerwow.com">mysite</a></div>
body {
background: #CC3366 url(images/temp.png) center 130px no-repeat ;
overflow:hidden;
margin:0;
padding:0;
}
#container {
width: 1000px;
overflow: hidden;
position: relative;
height: 450px;
margin: 0 auto;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.page {
width: 1000px;
height: 400px;
float: left;
text-align: center;
margin-top: 10px;
}
.page img {
margin-top: 10px;
}
#menu {
background: #000;
}
#menu ul {
list-style: none;
width: 457px;
height: 35px;
margin:auto;
}
#menu ul li {
float: left;
color: #FFFF33;
width: 150px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.active {
color: #fff !important;
}
#footer a{
font-size: 25px;
font-weight: bold;
}
#footer{
line-height: 100px;
background: #CC3366;
width:100%;
height:1000px;
text-align: center;
display: block;
}
#toptitle {
position: absolute;
width:100px;
top: 30px;
left: 30px;
color: #000;
cursor: pointer;
z-index:20;
}
a {
text-decoration: none;
}
#contain{
clear:both;
float:left;
margin-left:10px;
background: blue;
width:300px;
height:300px;
}
.clear{
}
$(".link").click(function(){
var page = $(this).attr("id");
var color = $(this).attr("class");
color = color.substr(5,6);
$('#all_pages').animate({left: (page-1)*(-1000) });
$("body").animate({backgroundColor: '#'+color});
$("#menu ul li").removeClass('active');
$(this).addClass('active');
});
I using table to do the job and it seems work out ok.
<center>
<table>
<tr>
<td valign=top align=right width=50%>Here is the text</td>
<td width=300px><img src='fun.jpg' width=300px height=300px></img></td>
<td width=50%></td>
</tr>
</table>
</center>