I'm trying to create a template webpage that uses the golden ratio for proportion. However, it appears I'm not doing it correctly.
I would like some advice on the proper use of:
div tags for laying out panels on a page
CSS and the position attribute
Any other tags or tips that will help me achieve an attractive page
HTML:
<html>
<head>
<title>Golden Ratio</title>
<link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head>
<body>
<div id="header">
</div>
<div>
</div>
<div id="bodyleft">
</div>
<div id="bodyright">
</div>
<div id="footer">
</div>
</body>
</html>
CSS:
body {
background-color: white;
}
#header {
width: 960px;
height: 100px;
background-color: red;
}
#bodyleft {
position: absolute;
top: 100px;
width: 592px;
height: 700px;
background-color: blue;
}
#bodyright {
position: absolute;
top: 110px;
left: 610px;
width: 368px;
height: 700px;
background-color: green;
}
#footer {
position: absolute;
top: 800px;
width: 960px;
height: 100px;
background-color: black;
}
I did some rather extensive golden ratio work in this post Is there a CSS way to position an HTML element vertically following the golden ratio? that may be helpful to you.
here is a link, http://jsfiddle.net/etienne_carre/WYStC/
I like to use the float left to align all my div and put a clear after it to finish the row.
Maybe this can help?
https://github.com/gbutiri/phi-grid
It's an extension that can be used with bootstrap and uses flexbox.
Related
Very new to web dev so apologies in advance if I sound like I do not know what I am doing. Trying to have this type of border around an image but cannot manage to do this with that specific corner. Any ideas?check the link please cannot embed images into this post
There are two blocks. you can use something like this(picture on the red one)
.bg
{
width: 120px;
height: 120px;
border: solid green;
}
.image
{
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div class="bg">
<div class="image">
</div>
</div>
</body>
</html>
I'm just starting web development, and I'm trying to construct a page-navigation bar with a bunch of 'Div' elements, but I cant seem to get my second button ("AboutButton") to appear on the screen. Here is my HTML body code:
<body>
<div id="navbar" id="top">
<div id="pageselection">
<div id="HomeButton"> HOME </div>
<div id="AboutButton"> <a href="#About> ABOUT </a> </div>
</div>
</div>
</body>
and here is my CSS for the page:
#navbar{
Position: fixed;
Width: 100%;
Height: 10%;
}
#pageselection{
Position: absolute;
Width: 40%;
Height: 100%;
Right: 30%;
}
#HomeButton{
Position: absolute;
Width: 33%;
Height: 100%;
Left: 0%;
text-align: center;
}
#AboutButton{
Position: absolute;
Width: 33%;
Height: 100%;
Left: 33%;
text-align: center;
}
Essentially, I'm trying to build a 'div' that runs across the top of the page, then mark off the central 40% of that 'div' as a space for a second 'div' to sit, which will in turn hold the three links that users can use to navigate the page.
Thanks in advance, hopefully its a stupid error, and I hope my description was clear enough :)
You missed an quote mark in
<a href="#About>
If you are only starting, i recommend you to use some free editors like Atom or Sublime that will alert you about this kind of errors.
Also, it is not allowed to use "id" two times on an element. A better practice would be to use classes where you will be able to stack them like:
<div class="navbar top"></div>
You missed an ending quote " in <a href="#About>. I also recommend another approach on your nav bar. Don't absolute position the links in the nav bar, that's not needed. And also, one element can have one ID, not multiple. I've made some changes and used classes instead of IDs below. Please have a look.
#navbar{
position: fixed;
width: 100%;
height: 10%;
top: 0;
left: 0;
background-color: whitesmoke;
height: 40px;
}
#pageselection{
position: absolute;
width: 40%;
height: 100%;
right: 30%;
background-color: gray;
}
.nav-button{
float:left;
width:33%;
height: 100%;
text-align: center;
line-height:40px;
}
.nav-button a{
display:block;
height: 100%;
}
<div id="navbar" id="top">
<div id="pageselection">
<div class="nav-button">HOME</div>
<div class="nav-button">ABOUT</div>
<div class="nav-button">TEST</div>
</div>
</div>
I'm attempting to learn HTML and CSS, but have run into a tiny stumbling block.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Testing My HTML and CSS</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: black;
height: 100px;
width: 100%;
}
.header h1 {
margin-top: 0;
text-align: center;
color: white;
height: 100px;
width: 100%;
}
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>Hello, World!</h1>
<div class="sidebar">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
which can be ran here.
I want to have the <h1>Hello, World!</h1> in the center of the .header. I've tried playing with the margin-top in .header h1, but it moves the entire .header.
Sorry for such a simple question -- I'm a complete newbie.
If your're not planning to add more elements to the header, you can just add line-height: 100px; to the .header h1 ruleset. That's it...
Vertical align can be tricky, if you don't want to mess around with a lot of code, this is the shortest way to accomplish it. As a general rule, to center text vertically into an element, just make its line-height equals to the element's height (unless you have some padding or margin changing stuff).
Use line-height instead as following:
.header {
background-color: black;
height: 100px;
width: 100%;
line-height:2;
}
Please try this demo
or you can try this using
.header{
line-height:3;
}
I'm looking for a valid cross-browser solution for an HTML page which:
Consumes 100% of the screen height, with no overflow (i.e. no scrolling)
has a vertically (and horizontally) centered <div> which will hold the main content
I know vertical centering is possible when the wrapping container has a static height. Is adjusting this height to browser window height something feasable? (Preferably, no JS should be used.)
Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not IE6):
HTML:
<div id="a">
<div id="b">
<div id="content"></div>
</div>
</div>
CSS:
html, body, #a {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#a {
display: table;
}
#b {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
#content {
border: 5px solid red;
width: 100px;
height: 100px;
margin: auto;
}
Live example:
http://jsfiddle.net/mGPmr/1/
You could do something like this. It looks to work in IE6 as well:
<html> <head>
<script type="text/javascript"> </script>
<style type="text/css">
#container { height: 100%; width: 100%; position: relative; }
#content {
border: 5px solid red;
width: 100px;
height: 100px;
position: relative;
margin-left: -50px;
margin-right: -50px;
top: 50%;
left: 50%; }
</style>
</head> <body>
<div id="container">
<div id="content"></div> </div>
</body> </html>
Is simply not possible without JavaScript, at least not with CSS2 or earlier (not sure if CSS3 makes this possible, someone clarify on that).
The other provided answers require absolute width and height for the element; I assumed no such requirement. There's no way to center a flowing element vertically which is what you usually want, given that you don't know the aspect ratio of the browser window to reliably use fixed-size containers for content.
First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.