Hi I am really struggling with this, can't figure out what I am doing wrong. I am building my friends website: bethcalter.co.uk/index.php and when checking it on other browsers, the divs were off the page and when I resized the window the divs were moving and I don't want them to do that.
I am new to HTML/CSS I don't do a lot of it, I'm more a designer, please help, I have looked for answers on here already, but something is up with my coding I think, I have tried giving the divs their own wrapper etc and it doesnt work.
My css:
#content {
margin:0;
width:900px;
height:400px;
margin-left:360px;
margin-top:-930px;
background-color: #ffffff;
position:absolute;
}
#bar {
margin:0 auto;
width:900px;
height:90px;
margin-left:360px;
margin-top:-1010px;
background-color: #ffffff;
opacity: 0.4;
position:absolute;
}
Html:
<body>
<div id="banner">
</div>
<div id="background">
<div id="wrapper">
<img src="images/Statue4.jpg">
</div>
</div>
<div id="wrap">
<div id="bar">
</div>
<div id="content">
<img src='images/deb.jpg' style="margin: 40px 40px 40px 40px"/>
</div>
</div>
</body>
</html>
Please help, much appreciated
Your big image div is moving if you resize your window because your are aligning it to the center of the page.
Remove this line in your css in your #wrapper selector if you just want to have it aligned left:
margin: 0 auto;
Related
I am trying to make a phpBB theme, but am having trouble setting up the DIV's the way I envisioned the page to be.
This is what I am looking to do.
http://imgur.com/n6eZbsT (image to help with understanding)
This is what I had so far.
index.html
<body>
<div id='container'>
<div id='header'>
</div>
<div id='sidemenu'>
</div>
<div id='content'>
</div>
</div>
</body>
css.css
*{
padding: 0px;
margin: 0px
}
#header {
width:100%;
height:50px;
background-color:#6FF;
}
#sidemenu {
display: block;
position:absolute;
width:100px;
height:100%;
background-color:#6F6;
}
The problem with this is that the sidemenu DIV overflows to the bottom of the page and creates a scrollbar.
I have tried looking for a solution, and only managed to get the overflow to go away by using bottom:0px; inside the sidemenu css
But this pushes the header to the right, and sidemenu to the top left corner like this..
http://imgur.com/LKk9VtF
I am stuck here, css gives me a huge headache ahaha. Can anyone please help me with a solution?
Thank you so much!
You should use height:calc(100% - 50px); top:50px; for your sidemenu. Run the snippet bellow.
*{
padding: 0px;
margin: 0px
}
#header {
width:100%;
height:50px;
background-color:#6FF;
}
html,body,#container{height:100%;}
#sidemenu {
display: block;
position:absolute;
width:100px;
height:calc(100% - 50px);
top:50px;
background-color:#6F6;
}
<div id='container'>
<div id='header'>
</div>
<div id='sidemenu'>
</div>
<div id='content'>
</div>
</div>
I am trying to make my logo and manu bar to follow my page as i scroll down the page,
Currently this is what i have.
CSS is;
html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}
#bar {
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}
and for HTML:
</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
So please what would i need to change to make both 'bar' and 'logo' follow my scroll.
thankyou for you help
Here is a jsfiddle with how I would do it...
http://jsfiddle.net/2Zqhw/
I've wrapped both elements in a div, gave it position:fixed and width:100%
You need a div to wrap your logo and bar and use CSS to set the position to fixed.
The CSS:
#nav-fixed {
position:fixed;
}
The HTML:
<div id="nav-fixed">
<div id="logo">
</div>
<div id="bar">
</div>
</div>
You could try nesting logo and bar within another div and then setting position:fixed on the enclosing div so your HTML would look something like:
<div id="fixed_bar" style="position:fixed;">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Or you could add the enclosing div as above but define the style for it in the CSS:
#fixed_bar
{
position:fixed;
}
With the HTML:
<div id="fixed_bar">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
On the webpage, I would like to create a virtual frame (centered about the page) and be able to align elements (e.g images, text, etc) within the frame using CSS properties.
Since a picture is worth a thousand words, this is what I mean:
I'd want to be able to align "Text1" to the left with respect to the virtual frame which is kept centered about the webpage. Similar idea with "CenteredText" and the blue box being aligned to the right relative to the frame.
I'd really appreciate suggestions on how I'd be able to do this.
This may help you:
HTML:
<div class="frame">
<div>Text1</div>
<div class="centered">Centered text</div>
<div class="box"></div>
<div class="clr"></div>
</div>
CSS:
.frame{width:80%; margin:0 auto; border:1px solid #444; height:500px}
.centered{text-align:center}
.box{background:blue; height:50px; width:50px; border:2px solid black; float:right}
.clr{clear:both}
jsfiddle: http://jsfiddle.net/ashishanexpert/fqaDQ/
margin: 0 auto;
in your css.
You need a div with a class or id you can attack to and then give it the above property.
This will centre the div in the page.
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="centered">centre</div>
<div id="right">right</div>
</div> <!--close wrapper-->
css:
#wrapper{
margin: 0 auto;
width: 960px;
position: relative;
}
#left{
float: left;
}
#right{
float: right;
}
Good luck!
I am using http://www.cssstickyfooter.com/ for a fluid header/footer/content page.
I am trying to do a two column layout for my site. Left div navigation; the right div content.
The left column has content vertically aligned in the center. The content is both vertically-aligned in the center as well as horizontally aligned in the center.
I'm stuck at laying out the navigation.
I would think I should be able to make a div for the nav container {float:left; width:300px;display:table;} then make the nav_content div something like {height:300px; display:table-cell; vertical-align:middle;}.
I thought at first the issue was that the container needs to span 100% height of whatever was left over after the footer and then the content would be able to vertically align the height. (The only thing I can find is 'background-hacks' to achieve this and Jscript to calculate and dynamically update absolute height. It doesn't seem right to me that those are the only options.) But when I set the parent div to a set height, then try and vertically-align the content, it still does not work. I really do not understand as all the resources I have read states that the parent contains table display and table-cell can use the vertical-align middle. (does using float mess this up?)
Here is a crudely drawn layout I am trying to accomplish.
http://i.imgur.com/VefhxU7.png
Here is the idea with the code.
<div id="wrap">
<div id="header">
</div>
<div id="main">
<div id="container">
<div id="content">
</div>
</div>
<div id="side">
<div id="nav">
</div>
</div>
</div>
</div>
<div id="footer">
</div>
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: left;
position: relative;
width: 250px;
display:table;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:200px;
background-color: blue;
}
What am I doing wrong? Thanks for anyone who tries to help. :)
try this :
<style>
#footer {
background-color: #999;
}
#header {
background-color: #0C6;
}
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: right;
position: relative;
width: 70%;
display:table;
height: 350px;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:30%;
background-color: blue;
float: left;
}
</style>
<body>
<div id="mainContainer">
<div id="header">This is header</div>
<div id="nav">This is Nav</div>
<div id="side">This is side</div>
<div id="footer">This is footer</div>
</div>
</body>
I have solutions that work in all browsers except IE, so I'd appreciate if the answers worked in IE.
<div id="content">
<div id="redBar"></div>
<div id="main">
<div id="header">
<img src="images/header.gif" id="logo1">
</div>
<div id="explanation">
Next div.
</div>
</div>
<div id="footer">
</div>
</div>
I guess I'll just give the CSS too:
#main
{
padding-left:229px;
padding-right:229px;
}
#logo1
{
width:auto;
z-index:1;
position: relative;
left:250px;
}
#main
{
//background-image:url('../images/indexBack.gif');
background-repeat:repeat-xy;
width:980px;
}
Well what you're trying to do is relatively simple but you're putting your logo nested in a few block elements that might mess it up because they don't have the necessary styling applied to them...
A visual image of the different areas would help but heres what I think you're trying to do. I am asuming you want the entire page centered too (if not then it is impossible with your current html).
(Also you defined the css class for #main twice)
<div id="content">
<div id="redBar"></div>
<div id="main">
<div id="header">
<img src="images/header.gif" />
</div>
<div id="explanation">
Next div.
</div>
</div>
<div id="footer">
</div>
</div>
<style>
#main
{
background-image:url('../images/indexBack.gif');
background-repeat:repeat-xy;
width: 980px;
margin: 0 auto;
}
#header img /* don't put un-needed ids on elements */
{
display:block; /* img is an inline element by default but we want it as a block so margin works */
margin: 0 auto;
}
</style>
If you know the dimensions of the logo then you can use absolute positioning. Lets say your logo is 200x100:
#logo1 {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* half the logo height */
margin-left:-100px; /* half the logo width */
}
This does rather assume that your element's container fills the size of the screen too though.