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/
Related
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.
I am a NOOB with css and am trying to construct a modal that will hold a video. I want the div that will hold the video to be placed in the center of the screen.
However, I'm having some trouble positioning it. I must be misunderstanding how this positioning works. It seems incorrect to have to use bottom: 1700px.
I want the user to be able to move the box up and down by scrolling in case their screen is too small.
How can center this div in the screen correctly?
HTML:
<!-- language: lang-html -->
<div id="videoModal" class="modalContainer">
<div class="videoOverlay"></div>
<div class="videoContainer">
</div>
</div>
CSS:
/*-------------------------*/
/* ----- Video Modal ----- */
/*-------------------------*/
<!-- language: lang-css -->
.modalContainer {
display: none;
}
.modalContainer.open {
display: inherit;
}
.videoOverlay {
background-color: black;
opacity: .8;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.videoContainer {
background-color: white;
width: 500px;
height: 500px;
z-index: 200;
position: absolute;
bottom: 1700px;
left: 25%;
}
JS:
<!-- language: lang-js -->
$('#openVideoModal').click(function(){
$('.modalContainer').addClass('open').removeClass('closed');
});
If you want to position .videoContainer at the center of the screen, you can do the following:
.videoContainer {
background-color: white;
width: 500px;
height: 500px;
z-index: 200;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Try this on your videoContainer:
.videoContainer {
background-color: white;
width: 500px;
height: 500px;
z-index: 200;
position: absolute;
top: 50%;
margin-top: 250px;
left: 25%;
}
Basically, you set your block at 50% from the top of your page with a negative margin of half your height value.
Same for horizontal values.
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');
})
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
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