HTML5 CSS style issue - css

Can't get my div tag css working Can somebody please point out the mistake I am making here. Trying to have one div take 70% of the page (left, top to bottom), the other two divs share the remainder. Added colour just so I can see if correct but not showing at all.
#master {
width: 70%;
top: 0;
left: 0;
background: orange
}
#detail1 {
top: 0;
left: 70%;
background: blue
}
#detail2 {
top: 50%;
left: 70%;
background: green
}
<header>
</header>
<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>
<aside>
Hello Ben
</aside>
<footer>
</footer>

Add height to your divs
#master {
width: 70%;
top: 0;
left: 0;
background: orange;
height: 15px;
}
#detail1 {
top: 0;
left: 70%;
background: blue;
height: 15px;
}
#detail2 {
top: 50%;
left: 70%;
background: green;
height: 15px;
}
<header>
</header>
<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>
<aside>
Hello Ben
</aside>
<footer>
</footer>

I believe that to solve your problem, you have to add position to your css. What is more to get master div from top to bottom height should be define as width for details to use rest of screen space. Like that:
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" />
<title>My new Page II</title>
<style>
#master{
position: absolute;
top: 0;
left: 0;
width:70%;
height: 100%;
background: orange
}
#detail1{
position: absolute;
top: 0;
left: 70%;
height: 50%;
width: 30%;
background: blue
}
#detail2{
position: absolute;
top: 50%;
left: 70%;
height: 50%;
width: 30%;
background: green
}
</style>
</head>
<body>
<header>
</header>
<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>
<aside>
Hello Ben
</aside>
<footer>
</footer> </body> </html>

Since your div blocks (master, detail1, detail2) are empty they won't show at all. Enter some content or set a height via css height attribute.

You have to specify the height of div block.

Related

Make an image look like it is placed over 2 <div> boxes with CSS

Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>

Overlapping images in css/html5

I am trying to put together a portfolio web site with four images that will be used as buttons and a center logo. I want four images to serve as links in the corners of the screen (each taking up roughly half the page) with a center logo overlapping them.
I've put together the CSS for the site, and each time I've tried to preview the site, I get the four images in the corner of the screen, with my center logo not overlapping.
here is the code that I'm using for the images:
div.upperLEFT {
position: relative;
float: left;
left: 0;
top: 0px;
right: auto;
bottom: auto;
width: 50%;
height: 50%;
max-width: 50%;
max-height: 50%;
z-index: 10;
}
div.upperRIGHT {
position: relative;
float: right;
left: auto;
top: 0px;
bottom: auto;
right: 0;
width: 50%;
height: 50%;
max-width: 50%;
max-height: 50%;
z-index: 10;
}
div.lowerLEFT {
position: relative;
margin-left: 0;
margin-top: auto;
margin-bottom: 0;
margin-right: auto;
width: 50%;
height: 50%;
max-width: 50%;
max-height: 50%;
z-index: 10;
}
div.lowerRIGHT {
position: relative;
float: right;
margin-left: auto;
margin-right: 0;
margin-top: auto;
margin-bottom: 0;
width: 50%;
height: 50%;
max-width: 50%;
max-height: 50%;
z-index: 10;
}
div.centerLOGO {
position: relative;
overflow: visible;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom: auto;
width: auto;
height: auto;
max-width: 50%;
max-height: 50%;
z-index: 20;
}
here is my html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> CJ Wormely's Portfolio </title>
<link href = "cjwstyle.css" rel = "stylesheet" type "text/css">
</head>
<body>
<h1> CJ Wormely Portfolio </h1>
<div class = "upperLEFT"> <img src = "aboutmetile.svg" /> </div>
<div class = "upperRIGHT"> <img src = "IDTile.svg"/> </div>
<div class = "centerLOGO"> <img src = "siteLogo.svg"/> </div>
<div class = "lowerLEFT"> <img src = "eMailTile.svg"/> </div>
<div class = "lowerRIGHT"> <img src = "artTile.svg"/> </div>
</body>
</html>
There are several ways to center your logo on the screen.
Now, as the other poster said, your code is "all over the place". I'm thinking you were experimenting and noticed this combination was close to working, and so stuck with it (we've all been guilty of that at some point). But using the right tool for the right job is important (to avoid unpredictable/hilarious results), so might I suggest this combination instead...
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CJ Wormely's Portfolio</title>
<link href="cjwstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>CJ Wormely Portfolio</h1>
<div class="corner upperLEFT"><img src="aboutmetile.svg"></div>
<div class="corner upperRIGHT"><img src="IDTile.svg"></div>
<div class="corner lowerLEFT"><img src="eMailTile.svg"></div>
<div class="corner lowerRIGHT"><img src="artTile.svg"></div>
<div class="centerLOGO"><img src="siteLogo.svg"></div>
</body>
</html>
CSS
.corner {
position: absolute;
width: 50%;
height: 50%;
}
.upperLEFT {
left: 0;
top: 0;
}
.upperRIGHT {
right: 0;
top: 0;
}
.lowerLEFT {
left: 0;
bottom: 0;
}
.lowerRIGHT {
right: 0;
bottom: 0;
}
.centerLOGO {
position: absolute;
left: 50%;
top: 50%;
}
.centerLOGO img {
position: relative;
top: -15px; /* your logo height divided in half */
left: -15px; /* your logo width divided in half */
}
There are definitely several different methods of vertically centering an element. Given the provided info, however, this method should work easily for you.
To see how this is expected to work, please see this example:
http://jsfiddle.net/D2Mz5/2/
Edit: To use z-index properly in your effect, use z-index: 999999;. Your images are spaced like that, undesirably as your .png because you need to define a wrapper.
Below is what I would do. I would nest in a few divs Note: // This isn't the full solution, I hope to point you in the right layout direction before writing this full page for you. You will have to define a few more properties to the CSS even to the ones I started - this is the logic I would suggest and should get you there pretty quick.
#mainwrap {
width: 100%;
min-height: ;
}
#coollogo {
z-index: 999999;
width: ;
height: ;
position: absolute;
margin-top: ;
margin: 0 auto;
}
#top {
width: 100%;
height: ;
}
.upperLeft {
min-width: ;
width: 50%;
float: left;
}
.upperRight {
min-width: ;
width: 50%;
float: right;
}
#bottom {
margin-top: 200px; // define
width: 100%;
height: ;
}
/// etc, etc
The Mark-Up:
<div id="mainwrap"><!-- main wrapper -->
<div id="coollogo"></div><!-- the cool logo -->
<div id="top"><!-- top half -->
<div class="upperLeft"></div>
<div class="upperRight"></div>
</div>
<div id="bottom"><!-- bottom half -->
<div class="bottomLeft"></div>
<div class="bottomRight"></div>
</div>
</div><!--// end main wrap -->
I would also minimize div.upperLEFT { to just .upperLEFT { as there is no need to type div each time. If you continue to run into coding errors, consult a Validator for more information http://validator.w3.org/

CSS FOOTER for Basic Website

I have a basic website, but I'm trying to put a fixed footer at the bottom similar to what I did for my header. For my header, I did the following.
body {
background: url(blueheader.jpg) repeat-x #F4f4f2
}
I want to do the same thing but have it show up at the bottom.
You should be wrapping your header and footer in their own tags and targeting them seperately. Leave the body as the "canvas" for your site.
HTML
<body>
<div class="header"></div>
content!
<div class="footer"></div>
</body>
CSS
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45px;
background-color: red;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 45px;
background-color: blue;
}
HTML:
<footer>
Your content here.
</footer>
CSS:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 45px; /* change this to suit your necessary height */
background: url(blueheader.jpg) repeat-x #F4f4f2;
}

Change 3D perspective while scrolling - fixed vanishing point

I'm trying to built up a small webpage, which is based on 3d boxes.
This page will be scrollable, and i want the vanishing point to stay fixed in the middle, so when I scroll the 3d boxes should change their look dynamically. The only result I was able to get is this: http://deesr.com/3dscroll/
In this Version the vanishing point stays at the starting point, and when i scroll the boxes stay the same.
EDIT: JS did the job. I used the OnScroll event to check the scroll position and re-setting the Perspective-Origin. Let me know if there's a better solution!
I know it is to late for the OP, but for all others coming across this question:
I was able to solve it by using a <div> inside the body that is emulating the body's scrollbars.
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
</style>
</head>
<body>
<div>
3d objects
</div>
</body>
</html>
Full example:
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
div#container {
width: 200%;
transform-style: preserve-3d;
}
#t,
#b,
#l,
#r {
margin-left: 45%;
margin-right: 45%;
width: 100px;
height: 100px;
background-color: yellow;
border: 10px solid black;
border-radius: 10px;
transform-style: preserve-3d;
}
#t {
transform: rotateX(270deg);
}
#b {
transform: rotateX(90deg);
}
#l {
position: relative;
top: 180px;
left: -60px;
transform: rotateY(270deg);
}
#r {
position: relative;
top: -180px;
left: 60px;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="container">
<div id="l">
<h1>left</h1>
</div>
<div id="t">
<h1>top</h1>
</div>
<div id="b">
<h1>bottom</h1>
</div>
<div id="r">
<h1>right</h1>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
My solution was that I reset the vanishing-point every time the user scrolls.
$(window).scroll(function() {
var scrollLocation = $(document).scrollTop();
var vanishingPoint = scrollLocation + window.innerHeight / 2;
$("#wrapper").css('-webkit-perspective-origin', ' 50% ' + vanishingPoint + 'px');
})

Floating Menu Variable Width

I'm trying to figure out how to have a floating navigation bar to the left of the content, that is fixed width but has a container around it that extends to the edge of the viewport while keeping the content centered on the page.
And here's what I got going so far and an image of what I mean. http://dl.dropbox.com/u/23132/index.html
Any help or ideas?
Got a solution from Bordingo.
<html>
<head>
<style type="text/css">
html, body { height: 100%; min-width: 960px;}
.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }
.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;}
.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }
.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }
</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>
If you are willing to use jQuery, you can pretty easily calculate the offset of the main body and adjust the width/padding/margin of the sidebar accordingly.
Simple example
http://dl.dropbox.com/u/1588084/floatmenu.htm

Resources