I'm sorry I tried everything, tried for thirty minutes couldn't get anything. Ok so this is my code. For some reason "div2" is not working and not moving down but ONLY able to move left and right. I want it to be able to move down and up from top or bottom of screen, but its only moving left and right and is located on the same level as the navbar
body {
background-color: LightGoldenRodYellow;
font-family:"Arial Black", Gadget, sans-serif;
}
#rightcolumn {
float: left;
margin-left: 100px;
}
#wrapper {
background-color: #33CC00;
color: #000066;
}
#midcolumn {
float: left;
width: 100px;
Margin: 15px;
}
#leftcolumn {
float: left;
width: 100px;
margin: 10px;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
.navbar {
text-decoration: none;
margin: 15px;
display: block;
}
.div2{
position:absolute;
float: left;
left: 200px;
margin-top:100px:
}
.title{
color: LightCoral;
position:absolute;
left: 50%;
top: 10%;
}
.titlesub{
color: Green;
position:absolute;
font-size: 12pt;
left: 50%;
top; 30%;
}
.content{
color: LightCoral;
}
ok next file
<!doctype htm>
<html>
<head>
<link href="midterm_helper.css" rel="stylesheet" type="text/css" />
<title>Vacation Destination </title>
</head>
<body>
<h1 class="title">
Vacation Island
<p class="titlesub">
~vacation awaits!
</p>
</h1>
<p class="div2">
test
</p>
<div>
<a class="navbar" href="hotel_form.html" target="_blank">Reservations</a>
<a class="navbar" href="hotel_room.html" target="_blank">Rooms</a>
</div>
</body>
</html>
If any of you actually bothered to read his code, you'd see that he has a colon: after his top style instead of a semi-colon;
This will do what you want it to do. The float: left; isn't necessary though :)
.div2 {
position:absolute;
float: left;
left: 200px;
margin-top:100px;
}
To position the div2 from bottom try this giving bottom value to the div
.div2{
bottom:0; // change the value as you need
}
why you giving position and float at same time in class. If you used position:absolute then you may give the values to top bottom and left and right.
Also your HTML code is really messed up. remove unwanted space and first make it proper HTML.
For example you are giving position and floating the element at same time. you should use only one at one time.
.div2{
position:absolute; /*either you should remove it*/
float: left; /*or you should remove this line*/
left: 200px;
top:100px;
left:0;
}
You can set top to move your div2 up and down like you have set by left
.div2{
top: 20px; /*set the value depending upon your requirement */
}
Related
I have a problem where my navigation bar seems to scale with the .container in CSS. Now, I'm quite a novice but I've tried messing with the values in CSS, but to no avail. Here's the code for both the HTML and CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana;
background-image: url(images/bg2.jpg);
max-width: 100%;
max-height: auto;
background-position: 0px 100px;
background-repeat: repeat-x;
background-color: black;
background-size: 100%;
}
#header {
background-color: #000000;
height: 100px;
width: 100%;
}
.container {
background-color: grey;
width: 960px;
height: auto;
margin: 0 auto;
color: rgb(200, 200, 200);
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(images/logo.png);
float: left;
display: block;
}
#navArea {
height: 50%;
float: right;
}
#nav {
list-style: none;
margin-top: 5%;
}
#nav a {
color: #C8C8C8;
text-decoration: none;
width: 75px;
height: 50px;
display: table-cell;
vertical-align: middle;
padding: 0;
}
#nav li {
width: 75px;
height: 50px;
float: left;
margin-left: 30px;
background-color: #252525;
border: 2px solid silver;
border-radius: 8px;
padding: 0px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#nav li:hover {
background-color: grey;
}
.page {
background-color: rgba(19, 19, 19, 0.9);
padding: 20px;
padding-bottom: 1px;
}
p {
margin-bottom: 20px;
}
.box1 {
position: relative;
width: 300px;
height: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
float: left;
}
#imageLogo {
width: 960px;
height: 324px;
background-image: url(images/Triicell-logo.png);
background-repeat: no-repeat;
background-position: center;
}
<html>
<head>
<meta charset="UTF-8">
<title>Test site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body a link="#C8C8C8" vlink="#C8C8C8" alink="#C8C8C8">
<div id="Header">
<div class="container">
<div class="box1">
<a id="logoArea"></a>
</div>
<div id="navArea">
<ul id="nav">
<li>wp_1
</li>
<li>wp_2
</li>
<li>wp_3
</li>
<li>wp_4
</li>
<li>wp_5
</li>
</ul>
</div>
</div>
</div>
<div id="mainArea">
<div class="container page">
<div id="welcome">Test site</div>
</div>
</div>
</body>
</html>
As I said, I'm a novice, so if there's something painfully obvious that I've missed, I'd be appreciative if you could point me in the right direction. I've been racking my brains all morning, trying to think what it could be.
Here are a couple of screenshots to reference what I'm talking about:
Before scaling the .container:
After scaling the .container:
What I'm doing to scale it is I'm changing the width of the .container to 50%;. Don't worry about anything else - I know what I'm going to do about scaling the rest, i.e. images, etc. - but it's just that navigation bar that seems to jump out of place.
But yeah, I'd be very greatful if anyone can help me with this issue. Failing that, at least point me in the right direction.
Hey thanks for making your question a lot more understandable, the the thing is that if you make the container 50%, then there isn't any more room left for the nav because the #logoArea width is to big so it pushes the nav to the next line, if you want it to work you should decrease the width of the #logoArea and/or the #navArea. I hope this helps.
You need to clear floats
For this you can add the .clear class after #Header.
.clear{
clear:both;
}
Or add .clearfix class in Header
#clearfix:after {
clear: both;
content: "";
display: block;
}
Then you can manage easily you .container width 50% or whatever.
and here is some mistake in your html code like-
<li>wp_1</a>
</li>
It should be like this -
<li>
wp_1
</li>
I hope it will helps to achieve which you want.
Ah... I see what's wrong here. There wasn't enough real estate for the navigation bar for it to be positioned where I wanted it. You see, there is supposed to be a logo beside the navigation bar, but since removing it, the navigation bar is now where I want it to be, even after scaling.
The only thing now would be to find out how to scale the navigation bar itself (i.e. make it so the nav bar changes size in correspondence to what resolution it's being displayed on), but I think that's a fight for another day.
Thank you to everyone who contributed to the question. I knew my foolishness would somehow get the better of me. Thank you, nevertheless.
Since #navArea is nested inside #Header you would have to remove #navArea from the natural flow of the page to achieve what you're after.
This would look something like;
#navArea {
position: absolute;
top: 20px;
right: 20px;
}
My current work is shown below. What I would like to achieve is that the text Membership Registration is aligned center, while the hyperlinks English and 中 文 is floating right but close to border-bottom - Now they are floating to the top.
HTML:
<div id="Header">
<a id="logo" href="http://localhost"><img alt="logo" src="images/logo.jpg"/></a>
<div id="HeaderText"><h1>Membership Registration</h1></div>
<div id="header_right">
English |
中文
</div>
</div>
CSS:
#Header {
height:70px;
margin-bottom:11px;
border-bottom: #dbe0e3 1px solid;
}
#header_right {
float: right;
padding-right: 50px;
}
#logo {
float: left;
height:65px;
left:20px;
top:17px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
#HeaderText {
float: left;
text-height: 65px;
text-align: center;
left: 50%;
}
Add padding-top to #header-right.
#header_right {padding-top: 30px;}
http://jsfiddle.net/e67wd21v/1/
Note to your code:
left and top do nothing when the element has no position property (#logo)
text-height property doesn't exist (used at #headerText) - you probably meant height or line-height.
update css for header_right
#header_right {
float: right;
padding:30px 50px 0 0;
box-sizing:border-box;
}
check fiddle
http://jsfiddle.net/swapnilmotewar/sh72pgmx/1/
I am trying to create a div that has a button on the left, right and then a header in between. Something that looks like this:
But I'm getting something like this:
You can see that there is a margin being added and I can't figure out why. I have inspected everything I can, and I can't figure out what I'm doing wrong. (I understand that the h2 is at 50%. I did this to try and figure out why the right button was being pushed down.)
Here is my HTML:
<div class="day_buttons">
<button id="previous_day"></button>
<h2 id="zip_h2">What day and time would you like your stuff picked up?</h2>
<button id="next_day"></button>
</div><!--end nav_buttons-->
Here is the CSS to go with it:
#next_day
{
float: right;
background: transparent url(./images/icons/forward_button.gif) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
#previous_day
{
position:relative;
top:0;
left:0;
float: left;
background: transparent url(./images/icons/backward_button.gif) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
.day_buttons
{
height:3em;
width:100%;
display:inline-block;
}
#zip_h2
{
width: 50%;
margin:0px !important;
overflow:hidden;
}
Here is a Fiddle for those who need it: http://jsfiddle.net/tK72Z/
H2 elements are block-level so it will always try to fill 100% of the width on the "line" unless you tell it not to.
Just add float:left to your h2 styling and you should be good.
I think you're looking for something like this.
#zip_h2
{
width: 50%;
margin: 0 auto;
text-align: center;
}
OR
#zip_h2
{
width: auto;
text-align: center;
}
try it like this:
HTML:
<div class="day_buttons">
<button id="previous_day"></button>
<h2 id="zip_h2">What day and time would you like your stuff picked up?</h2>
<button id="next_day"></button>
</div>
CSS:
.day_buttons
{
position: relative;
}
.day_buttons h2
{
text-align: center;
}
.day_buttons button
{
position: absolute;
top: 10px;
}
.day_buttons #previous_day
{
left: 0;
}
.day_buttons #next_day
{
right: 0;
}
Just a small Change
top: 0;
right: 0;
Working Fiddle
Changes in the CSS :
For the right button
#next_day
{
position: absolute;
float: right;
top: 10px;
right: 10px;
background: transparent url(right.jpg) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
For the heading
#zip_h2
{
margin:0px !important;
padding-left: 20px;
padding-right: 70px;
text-align: center;
overflow:hidden;
}
i want to place 4 rectancles with text in my website
something like this (blue is the color that specifies them!
http://imageshack.us/photo/my-images/42/983f.jpg/
and the real footer looks like this
http://imageshack.us/photo/my-images/545/aygh.jpg/
area with grey is the area with the links down
here is what i have
HTML
<div class="footer" id="footer">
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
</div>
CSS
#footer
{
background: rgba(0,0,0,0.5);
color: White;
padding: 0;
text-align: left;
vertical-align: middle;
line-height:normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
font-size: 1em;
clear: both;
height: 10%;
}
#footer p {
position: absolute;
bottom: 0px;
margin-left: 600px;
}
#footer a{
text-align: center;
color: white;
position: relative;
bottom: 0px;
margin: 20px;
}
#footer span {
bottom: 5px;
}
i dont want to change the
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
i want to add another div with 4 sqare boxes with positions left, center-left, center-right and right
if you want the links to render horizontally across the page you can apply the following css.
div a
{
display:inline;
border:1px solid #000;
padding:5px;
margin:auto;
bottom:0px;
}
.footer{
position:absolute;
bottom:0px;
}
get rid of the <p> tag it is not needed
You can style the rest as needed. If you are looking for something more particular please update your question with specifics
here is a fiddle
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example