Everything is working fine on my default resolution; however, when I run my website on another resolution everything goes to the right instead of center. Why is this? I have tried setting the overflow to 0%.
Here is the HTML file:
<html>
<head>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
<body>
<div id="banner">
<h2 id="bannertext"> Websites4u </h2>
</div>
<div id="buttonbar">
<a id="homeb" href="webpageone.html">Home</a>
<a id="aboutb" href="fake.html">About</a>
<a id="contactb" href="webpage2.html">Contact Us!</a>
</div>
<div id="mainbody">
<p id="radio">
3gb: <input type="radio" name="age" value ="<3gb"> <br> <br>
4gb: <input type="radio" name="age" value ="4gb"> <br> <br>
8gb: <input type="radio" name="age" value ="8gb"> <br> <br>
16gb: <input type="radio" name="age" value ="16gb"> <br>
</p>
<h4 id="bodytext"> Please Select Your Hardware </h4>
<h3 id="Ram"> Ram </h3>
</div>
</body>
</html>
Here is the CSS:
*{
margin:0;
padding:0;
}
h1 {
color:blue;
}
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
#banner{
position: relative;
height: 50px;
width: 148%;
border: medium solid BFBDBA;
background-color:F1C43E;
margin:0 auto;
}
#bannertext{
color:white;
text-align:center;
font-family:Comic Sans MS, cursive, sans-serif;
margin:0 auto;
}
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
#homeb {
position: relative;
left: 450px;
}
#aboutb{
position: relative;
left: 500px;
}
#contactb{
position: relative;
left: 550px;
}
a {
color: white;
font-weight:bold;
}
a:hover {
COLOR: orange;
font-weight:bold;
}
#bodytext{
position: relative;
top:50px;
left:50px;
color:red;
font-size:35px;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
#mainbody{
position: relative;
background-color: white;
height: 1000px;
width: 80%;
left: 30%;
top: 5px;
border:medium solid F1C43E;
}
#radio{
position: absolute;
top: 240px;
left:100px;
font-size: 18px;
margin:0 auto;
}
#Ram{
position: absolute;
top: 176px;
left: 100px;
font-size: 30px;
color: Green;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
Hard to fix all your issues quickly. Your basic mistake is that you have absolute values for every item.
For instance:
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
Because of width specified there, your content will always have width of 1280px when you open it on a screen with smaller width it will be still rendered with width of 1280px and because of overflow:hidden you will see it simply like it is shifted to the right side. When you do something with computer it will do not what you WANT, but what you ask it to do. And overflow:hidden simply hide everything outside of visible area, not center content like you want.
For #buttonbar:
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
- even have no idea why do you need width:148% here. Buttons inside it are centered with absolute positions:
#homeb {
position: relative;
left: 450px;
}
left:450px strictly says to browser: hey, put this #homeb on the 450th px inside its parent block. And browser will do it like that and will not shift it to little more left because you want it to be centered.
You may tell him to place all buttons in center:
#buttonbar {
height: 30px;
text-align:center;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
text-align:center; - this will tell browser to center content inside of #buttonbar not depending on its width, and no need to define classes for #homeb, #aboutb and #contactb.
And so on. There are to many places to fix. I gave you a starting point. Here is demo with some changes already done for you: http://jsfiddle.net/2rM6K/7/
You just need to understand what each line of your code means for browser if you want to get something working correctly. If you do not understand how something works - there is a lot of info in web and people are ready to help you. Just do not expect that some magic happens while you writing a code - you must learn how things work. Read, try, experiment, read again, try again, experiment again until you start understanding why and how something works.
page
{
Margin-right:auto;
margin-left:auto;
width:800px;
}
u can change width according to your requirement.
Related
Hey if anyone is able to assist it would be much appreciated, I have no idea how to move the following textbox to where I want it to be.
This is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
</head>
<body>
<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">
<input type="text" placeholder="Insert Keyword Here">
</body>
</html>
And here is the CSS behind it:
.custom1 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(-210px);
width: 23%;
}
.custom2 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(+25px);
width: 25%;
}
input[type=text]{
width:20%;
border:2px solid #000000 ;
border-radius:4px;
margin:8px 0;
outline:none;
padding:8px;
box-sizing:border-box;
transition:.3s;
font-size: 20px;
text-align: center;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
input[type=text]::placeholder{
font-family: Calibri;
font-size: 20px;
font-style: italic;
text-align: center;
}
It would also be useful if anyone knew how to make it not move when zooming in and out, Setting the position to fixed doesnt help as I am moving a gif inside of the Image by transforming it up/ down y pixels
EDIT - MainBrowser.png is the whole image above "Insert Keyword Here" textbox, minus "Geoorgle" which is SearchEngineGIF.gif
Instead you can just use the form tag
<form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>
Change the source of the images and the width according to your need.
You can also use the table tag if you want
And about the image not moving, once you fix the position, put the top and left parameters for the form in the style.
Example:
top:25%;
left:25%;
How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.
Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.
Stylistic notes (unrelated to the problem):
border-radius: 0 12px 12px 0; means the same thing as
border-top-right-radius:12px;
border-bottom-right-radius:12px;
but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.
The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
I have three link <a> elements with a background but half the link isn't clickable because the background overlaps the text. Does anyone know a solution?
Here is an example of what i've done
<html>
<head>
<style>
li
{ list-style-type:none;
list-style:none;
position:relative;
height:100px;
}
#middle
{ width:350px;
background:url("images/middle.png");
left:405px;
height:250px;
padding-top:50px;
background-size:100%;
}
#left
{ left:275px;
width:240px;
height:150px;
padding:150px 60px 0 0;
background:url("images/left.png");
background-size:100%;
}
#right
{ left:580px;
width:235px;
height:150px;
padding:150px 0 0 70px;
background:url("images/right.png");
background-size:100%;
}
#test
{ height:325px;
}
.Item
{ position:absolute;
font-size:33px;
float:left;
margin:15px;
font-family: Georgia, Times, "Times New Roman", serif;
text-align:center;
}
</style>
</head>
<body>
<ul id="test">
<li id="left" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="middle" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="right" class="Item">I want to<br>have some<br>text here</strong></li>
</ul>
</body>
</html>
Add a Z-Index like that :
#middle
{ width: 350px;
background: url("images/middle.png");
left: 405px;
height: 250px;
padding-top: 50px;
background-size: 100%;
z-index: 2;
}
Maybe you could merge the three pictures into one as shown in the page.Then start your layout using the new merged picture as background-image.When I want to build my website,I always draw a sketch of my website.I will treat the test div as a whole and set a background-image attribute for it.Feel sorry for my pool expression.Hope to solve your question.
Okay, I've seen loads of information about this, but none of the suggested fixes worked for me, or perhaps I just didn't properly understand, so if someone could break this down elementary for me that'd be great, or point me to another link that does. I have a series of divs to make my header, a main container with the logo inside floating left, and then another container floating right, that works all fine, but the internal "menu" container contains two divs in it, one supposed to be at the top, the other at the bottom... to visualize it, its login or register links at the top, and a series of menu links at the bottom. The problem is the ones that are supposed to be at the bottom are actually going to the top, right under the register and login links. If that didn't give you a visual picture, then here is the actual header http://www.sunnahspace.com/pages/header.php i've tried loads of stuff, maybe I've just been trying it wrong though. i've tried the whole, position absolute stuff and honestly i don't even know what that means, but I get the feeling I'm headed in the right direction. Thanks in advance for anyone's help!
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
add the following to your styles
#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}
Sorry, I feel like making someone else to do my job but I feel really lost here, here's an image of what I got now:
Where the two "Anonomymos" are is ment to be the place for tha active users in the chat, however, the more people I add to the chat the <div> tag where the message is posted goes under the <div> tag for the active users and obviously I want to be shown next to each other.I use a premade CSS style sheet for this, and hope that it could be changed in way to work for my needs, but I have poor knowledge about CSS so I'm not even sure if it is usable in my case, anyways, here is the CSS style that I use at the moment:
#ActiveUsers
{
clear:both;
border: 1px solid #cccccc;
width: 356px;
background: #E9ECEF;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
padding:2px;
margin-bottom:10px;
margin-top:10px;
margin-left: 60px;
}
#chat
{
margin: auto;
border: 1px solid #cccccc;
width: 356px;
background: #E9ECEF;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
padding:2px;
height:400px;
overflow:auto;
}
#main {
margin: auto;
border: 1px solid #cccccc;
width: 600px;
min-height:150px;
background: #F1F3F5;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
border-collapse:collapse;
}
#sender
{
margin-left: 125px;
}
And here is the structure in the .php file :
<div id="main">
<div id="ActiveUsers"></div>
<div id="chat"></div>
<div id="sender">
Your message: <input type="text" name="msg" size="30" id="msg" />
<button onclick="doWork(document.getElementById('msg').value);">Send</button>
</div>
<span id="logOut">
<form action="logout.php">
<input type="submit" value="Logout"/>
</form>
</span>
</div>
P.S Just to mention, now the #ActiveUsers width is more than the free space but even if I make it 30px, the #chat <div> still goes under and under with every new user that is logged.
The issue might be that your Active Users are wrapped in some block-element when they are dynamically added to your markup. Based on how it is displayed, I'm guessing that
<div id="ActiveUsers"></div>
turns into
<div id="ActiveUsers"><div>Anonymos</div> <div>Anonymos</div></div>
Check to see if your active users are wrapped by any tag. If they're wrapped with a <div> tag, you'll need to add this to your CSS:
#ActiveUsers div {
display: inline;
.
. /* Your styles here */
.
}