I have an issue regarding the positioning of a div on my page. I would like to have it underneath my other two elements, but everything I have tried previously has not worked - even though the internet seemed to tell me that it should.
Here is my code:
#headingmain {
position: relative;
top: 150px;
font-family: Comic Sans MS;
}
#main {
margin: 0 auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#para {
position: relative;
top: 150px;
font-family: Comic Sans MS;
}
#test {font-family: Comic Sans MS;}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center" id="headingmain">Title</h1>
<p id="para" align="center">para</p>
<div id="main" align="center">
<p id="test">Test</p>
</div>
</body>
</html>
I cannot for the life of me find a tutorial on the internet that will position the div underneath the other two elements. This was my last resort, and I am thankful for any help you guys can provide.
Thanks again!
This is a very simple fiddle with the positioning you are trying to achieve: http://jsfiddle.net/eh8ff325/3/
As you can see there are two nested div ( #one > #two ) and the #three div positioned below.
<main>
<div id="one">One
<div id="two">
Test
</div>
</div>
<div id="three">Three</div>
</main>
All the three div are inside a container which do the horizontal alignment and some top margin.
Related
this is the footer
#footer {
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
bottom: 0px;
top: 99%;
}
#copyright {
float: left;
font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin {
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}
<div id="footer">
<div id="copyright">
© 2016 copmpany
</div>
<div id="linkedin">
Follow us on
<a href="https://www.linkedin.com/">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
This how it looks like. This how it should look like. I don't want to use position:absolute and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.
I have tried everything, including using .container{ max-height:140%;} and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.
This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.
This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR
<!doctype html>
<html>
<head>
<!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
<!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>
Your page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Services</title>
</head>
<body>
<div class="index_wrapper">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<!------CONTENT------>
</body>
</html>
<div class="container">
<div class="service_title">
</div>
<table>
<!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
</body>
</html></div>
</body>
</html>
You can change position:absolute; to position:fixed;
Check the code in this link: https://jsfiddle.net/4qyojap2/
#footer{
background: #F3F5F6;
position: fixed;
width: 100%;
height: 30px;
padding:20px;
bottom: 0px;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Your css says :
bottom: 0px;
top:99%;
This is not needed as your div already is at the bottom of your HTML.
The footer will position correctly if you suppress these two lines.
New CSS here :
#footer{
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Have you tried this
#main-body{height:100vh;}
<header role="header">
<nav role="navigation">
Home
</nav>
</header>
<div id="main-body">
this is the main body
</div>
<footer role="footer">
this is the footer
</footer>
or you can use jQuery on it like,
//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');
Hope this help. Cheers!
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I want to create a fluid design with header (full-with), big image slideshow on the left and 4 images as sidebar.
I want to make the sidebar 100% height, with 4 images (which will act as buttons). The height should always be 100%, so no scroll. Width should automatically change when resizing browser.
But I couldn't get it done. Do you have any suggestion?
Fiddle
Thank you very much!
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<style type="text/css">
body {
background-color: #fff;
padding: 0;
margin: 0;
font-family: "Droid Sans", sans-serif;
width: 100%;
}
div#links {
float: left;
}
div#rechts {
float: right;
display: block;
height: 90%;
background-color: grey;
}
div#rechts img {
height: 25%;
width: auto;
clear: both;
}
div#cat {
float: right;
clear: both;
}
header {
height:10%;
font-size: large;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<header id="header">header</header>
<div id="links">
Content left side
</div>
<div id="rechts">
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div>
</div>
</div>
</body>
</html>
Use bootstrap 2 or 3 for making fluid and responsive websites simple and easy to use once get hang of it you can pretty much do anything with bootstrap you can easily div them in to separate grids to do the way you would like.
CSS-Tricks is a great place to start more user friend forum also can search post your message in there but also show code sample what your trying to achieve
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.
I'm trying to use this jsfiddle to have a horizontally and vertically centered div that stays 100% of the browser width and height, in which the text should be aligned center vertically and horizontally, but currently the top line of the text is aligning to the center, rather than having an overall center point being in the center of the 3 lines of text.
Anyone know how to accomplish this?
My HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Regret</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Bowlby+One+SC' rel='stylesheet' type='text/css'>
<link href='css/regret.css' rel="stylesheet">
</head>
<body>
<div id="container">
<div class="inner">
<h1>Regret</h1>
<p class="choice">Let it out</p>
<p class="choice">Wallow in it</p>
</div>
</div>
</body>
</html>
My CSS:
body { font-family: 'Gloria Hallelujah', cursive; margin:0; text-align:center; color: #5e7c88; }
h1, h2, h3 { font-family: 'Bowlby One SC', cursive; color: #4b5f6d; }
img { border: 0; }
#container { margin: 0 auto; }
.choice { font-family: 'Bowlby One SC', cursive; }
.inner { position: absolute; top: 50%; }
This fiddle should work (if I understood what you want correctly): http://jsfiddle.net/7ZSmX/23/. I basically use the display: table and display: table-cell properties.
change inner to this
position:fixed; top: 50%; text-align:center; width:100%;
Here is the fix:
http://jsfiddle.net/7ZSmX/13/
.inner { margin-top: 50%; }
is what you want to instead of relative.