Hi ia m trying to make a old template my self i have done uptop the below code i didnt understand how to achieve the middle body part.Please see the image to understand what i need to achieve.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>static3</title>
<style type="text/css">
#content {
float: right;
width: 630px;
padding: 30px 30px 0 0;
}
.headerTop {
height:150px;
width:80%;
background-position:center;
align-self:center;
background-color: #444466;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
text-align:center;
}
logo{
font-size:100px;
font-style: italic;
line-height: normal;
font-weight: bold;
text-transform: none;
color: #ffffff;
}
.footerBottom {
background-color: #664444;
width:80%;
height:30px;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
text-align:center;
}
.bodyHome{
height:400px;
width:80%;
}
</style>
</head>
<center><header class="headerTop"><logo>My Website<logo></headerTop></center>
<body>
<center><footer class="footerBottom">Footbar Inc</footer></center>
</body>
</html>
http://postimg.org/image/qt891yde7/
See the image i need to achieve like that.Thanks for your help...
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've noticed something quite strange, I can't seem to get h1 and button html elements aligned.
I've removed borders and paddings however there still seems to be a consistent misalignment. I am unsure what is happening, can someone please explain why this behavior is occurring? I have attached a picture of the end result:
<head>
<style>
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
Use verticle-align: top; instead of verticle-align: text-top; because verticle-align: text-top; effect only text. And there is a default border-width: 2px; to button so remove if you don't need.
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
<div>
<h1>Head</h1>
<button>Head</button>
</div>
if you wanna h1 tag and button together then here is your solve....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
margin-top:-4px;
margin-left: -4px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
</html>
Use this code it will be fine
button {
margin-top: 1px;
padding: 0px;
display: inline-block;
height: 30px;
width: 100px;
background: lightblue;
vertical-align: top;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin: 0px;
margin-top: 2px;
margin-left: 4px;
margin-bottom: 3px;
padding-top: 3px;
padding-left: 23px;
display: inline-block;
height: 24px;
width: 70px;
background: lightblue;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
Ive been learning html and css myself and i want to add an image and a text which moves when pages moves
Heres what i did
p1{
color: black;
font-family: courier; }
#p2{
color:black;
font-family:courier; } .a{
color:yellow;
font-family:courier;
font-size: 30px;
background-color: black;
margin: 10px auto ;
margin-right: 200px;
margin-left: 200px;
margin-bottom: 200px;
text-align: center;
padding: 20px;
padding-left: 30px;
border: 10px groove lightgreen; } body{
background-color: cyan; } img{ margin-left:200px; }
and here's html code
<DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' type = 'text/css' href = 'kol.css'/>
</head>
<body>
<p id = p1>
this is paragraph.
</p>
<p id = p2>
paragraph2
</p>
<p class = 'a'>
this is cool
</p>
</body>
</html>
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I want to lift the navigation links in my header section. They all are in a div class "links" which is under div class "headers".
But the margin-bottom property doesn't have any impact.
So to check whether there is any change in position I made the border around the div class "links".
But when border appeared all the navigation links are shown out of the box.
Also there is no impact of margin-bottom on the border box.
Jsfiddle: http://jsfiddle.net/L2k67eyx/
PLEASE let me know whats wrong with my code? Also is there any rules I must know when does margin properties work?
CODE Snippet:
body{
height: 100vh;
margin: 0px;
}
.header{
background-color: white;
height:50%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
.content{
position: relative;
background-color: white;
height: 90%;
overflow-y: auto;
}
.logo{
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-bottom: 10px;/*NOT WORKING*/
/*right: 100px;*/
border-style:solid;
border-color: black;
outline-style: solid;
outline-color: green;
}
a{
position: relative;
right: 0px;
top: 25px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home Page</title>
<style type="text/css">
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png" alt="Logo">
</div>
<div class="links">
Home
Offers
Login
Register
Contact
About
</div>
</div>
<div clear="both"></div>
<div class="content">
</div>
<script type="text/javascript" src="home.js"></script>
</body>
</html>
you should to remove margin top:0px in tag a style to be
a{
position: relative;
right: 0px;
top: 0px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
I have a simple layout and the logo appears to be different in firefox and I can't seem to get an even medium in all browsers as when I change the height of the letter 'f' in the blue box it effects all browsers.
The issue i am having is with the div "logofoxfont" as I want the letter 'f' to be in the same position in all broswers but it appears to be different in firefox.
How can I sort this?
<html>
<head>
</head>
<link href="fw.css" rel="stylesheet" type="text/css">
<body>
<div class="topbox">
<div class="logobox"><div class="logoboxfont">
f</div></div>
<div class="logotext"></div>
</div>
<div class="midbox">
<div class="menubox"><div class="menuboxfont">Home<br>About Us<br>Staff<br>News<br></div>
<div class="menubox2"><div class="menuboxfont2">Appointments<br>
Price Guide<br>Emergency Services<br>Feedback<br></div></div></div>
</div>
</body>
</html>
And the css is:
#logo{
background-image:url(40.jpg);
height:100px;
width:100px;
}
.topbox {
margin: 0px auto;
height:100px;
width:900px;
margin-top:0px;
background: #ffffff;
}
.logobox {
height:90px;
width:70px;
margin-top:10px;
background-color:#2FB2F4;
}
.logotext {
color: #333333;
font-family: Cambria;
font-size: 18px;
margin-top: -90px;
margin-left: 75px;
position:absolute;
}
#logotext1 {
margin-left:10px;
}
#logotext2 {
color: #00AAF5;
font-family: georgia;
font-size: 22px;
margin-top: -35px;
margin-left:10px;
}
.logoboxfont {
font-family:Cambria;
color: #ffffff;
font-size: 126px;
position:absolute;
margin-top:-20px;
margin-left:0px;
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
.midbox {
margin: 0px auto;
height:700px;
width:900px;
margin-top:0px;
background: #ffffff;
border-top: 1px solid #333333;
}
.menubox {
height:230px;
width:150px;
margin-top:10px;
background: #E6E6E6;
}
.menuboxfont {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}
.menubox2 {
height:160px;
width:150px;
margin-top:70px;
background: #FAFAFA;
position:absolute;
}
.menuboxfont2 {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}
Thanks for the help!
James
See fiddle for code and demo:
Fiddle: http://jsfiddle.net/kHtmf/1/
Demo: http://jsfiddle.net/kHtmf/1/embedded/result/
SS of Firefox:
SS of chrome:
SS of Safari: