When I zoomed the browser, the date and apa div went outside the container div. How to keep the date/apa div still inside the container even when zoomed? Sorry for asking simple question. Just a beginner.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="testeffect.css"/>
</head>
<body>
<div id="header">
<div id="container">
<div id="date">
<p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p>
</div>
<div id="apa">
<p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p>
</div>
</div>
</div>
</body>
</html>
*{margin: 0 auto;}
#header{
height: 50px;
width: 100%;
background-color: black;
}
p{
font-family: Garamond;
font-size: 18px;
color: white;
}
#container{
height: 50px;
width: 800px;
position: absolute;
left: 20%
}
#apa{
position: absolute;
left: 200px;
width: 200px;
height: 50px;
background-color: brown;
left: 420px;
}
#date{
position: absolute;
left: 200px;
width: 200px;
height: 50px;
background-color: brown;
}
http://jsfiddle.net/zWpM9/
most of the times, absolute positioning causes that. try not using absolute positioning
#header{
height: 50px;
width: 100%;
background-color: black;
}
can't inherit the width based off the parent if the parent also not set, try
body {
width: 100%;
}
also get rid of that * { margin: auto; } and only add it to things that MUST be centered.
Additional issues, you are using #header { width: 100%; } and then #content { width: 800px; } which is a poor idea. If header is smaller than 800px, what will content do? act strangely, and unexpectedly. So, please don't do this. Either specify all with percents or NONE (it will be easier for you as a beginner).
here is my fiddle, GUESSING what you might have wanted to do. It scales with zoom correctly, and uses no percentages.
http://jsfiddle.net/QgH99/
Related
I'm practicing with web development and I have a very weird problem with HTML and CSS.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<!--<div id="friendRequests"></div>-->
<div id="friendRequests"></div>
<div id="chatScreen"></div>
</body>
</html>
As you can see, #friendsList and #friendRequests are exactly the same. Note the line after the div that has been commented out, it has the id friendRequests. When I load the page, the div doesn't show up. But here is where I get confused. If I change the id of that div to friendsList, it does show up, but those two identities have exactly the same properties (I did this just to debug, friendRequests will have other properties). I even commented the friendsList out in CSS and I even removed it, it still doesn't change. Can someone explain to me why this apparently only depends on the name of the id? Thanks!
Big Update:
Apparently the script works perfectly fine in Microsoft Edge, so the problem lies in Chrome. Using Element Inspector, I discovered that the #friendRequests is actually never loaded in Chrome!! What might be the issue here?
Both divs #friendsList and #friendRequest are set with position: absolute; and float: left;.
This means both will be aligned to the left side of the screen regardless of other elements. As a consequence, both divs are on top of each other and only one is visible (specifically the one which is defined later in html).
You should remove the position: absolute from the divs. Or make them relative, so they are aligned next to each other, depending on the order in the html.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
text-align: center;
height: 50px;
width: 60%;
background-color: blue;
position: relative;
}
#friendRequests {
float: left;
height: 100%;
width: 20%;
background-color: red;
position: relative;
}
#friendsList {
float: left;
height: 20%;
width: 20%;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests"></div>
<div id="friendsList"></div>
<div id="chatScreen"></div>
</body>
</html>
The reason for this is both the div are having same css when you use the same id because of which the divs are overlapping on each other.
The id should be unique.
To understand the difference, I have shifted "friendRequests 2" block a bit left.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
.left_block{
left: 21%;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests">friendRequests 1</div>
<div id="friendRequests" class="left_block">friendRequests 2</div>
<div id="chatScreen"></div>
</body>
</html>
Thank you for answering, I found the solution. The problem wasn't the script, it was my browser apparently. Like I commented a few times, loading the page in Edge worked perfectly fine. I discovered using the debugger tool that the CSS file wasn't loaded completely for one or another reason. Thus I suspect this might be a bug in Chrome.
I have a problem with my brand new html & css sites : I want to have a that opens when hovering on a floating element of itself. The problem is not on animation but on layout. When it's empty, it works well, but when I add content into the , it goes under the floating element. To solve this, I've tried different overflow values as explained here, but of course the part of the whitch is "outside" of it got impacted.
(in this sample, the "menu" is already opened)
section
{
background-color: white;
margin: 10px;
}
.scroll_aside{
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left{
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top:0;
}
.aside_left .cote{
position: relative;
top:0px;
right: -80px;
width: 80px;
background-color: orange;
margin-top: 100px;
margin-left:0;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TEST2.css"/>
</head>
<body>
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
</body>
</html>
Another thing I've noticed is that when the content is thin enough, it goes to the top....
But what I want, is to have the content taking all the , so going at the top and with width=100%.
Is there a way to do that ?
Thank you in advance....
Instead of float use absolute position:
section {
background-color: white;
margin: 10px;
}
.scroll_aside {
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left {
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top: 0;
}
.aside_left .cote {
position: absolute;
left: 100%;
width: 80px;
background-color: orange;
top: 100px;
}
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.
design im looking to get:
design
source (html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<title>Title</title>
</head>
<body>
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
</body>
</html>
source (css):
/**/
html,body{
height: 100%;
}
body {
background-image: url("background.jpg");
}
div {
margin: 0px;
}
.menu {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top:200px;
right: 0;
text-align: center;
position:fixed;
}
.contact {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position:fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position:fixed;
top:0px;
left:0px;
}
.main {
background-color: green;
width: 100%;
margin-top:200px;
height: 200vh;
left: ;
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div
the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.
the .js file is currently still empty so i didnt post any source of it.
Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!
edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.
jsfiddle: http://jsfiddle.net/zt1Lyaop/
I ignored your existing code and made a new, HTML5 and responsive way of creating such a layout. I hope this helps you in understanding this concept better
http://jsfiddle.net/7k9vhk4r/2/
The key is using fixed and relative positioning, together with creating offsets based on percentages.
I just changed this:
added margin:0 to body
Change .main rules to :
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px; /* to make it big */
/*left: ;*/
See the demo FULL PAGE
body {
background-image: url("background.jpg");
margin:0;
}
div {
margin: 0px;
}
.menu {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
right: 0;
text-align: center;
position: fixed;
}
.contact {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position: fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
}
.main {
background-color: green;
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px;
/*left: ;*/
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
I can't get the img element to move to the left hand side. The left: 0px attribute isn't doing anything. In fact, I can't seem to move anything inside the #top div to move.
The img tag is inside top. I omitted rest of the webpage but I hope this is enough.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="topBorder"> </div>
<div id="top">
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
</div>
</body>
</html>
CSS code:
body {
max-width: 60em;
margin: auto;
position: relative;
}
div {
border: solid;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
#topBorder {
background-color:#255FAA;
height: .7em;
width: 100%;
border: transparent;
}
#top {
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
left: 0px;
}
It looks like the text-align:center from your div element is the problem. Try overriding that in #top and I think it will start behaving as you expect. See this fiddle:
http://jsfiddle.net/3KyrW/
Your #top should have positive: relative, then your #top img should have position: absolute ... that will move the image around in your header.
I am not 100% sure about what how are trying to position. But adding a display: block; and a float: left; to #top img seems to float the image to the left. The left: 0px; is not needed when using position: relative; so I removed it. Also added a position: relative; to the #top <div>.
Also you seem to have inline styles in your <img> tag? That seems off.
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
So I took that out & added it to the CSS as well. New <img> tag looks like this:
Revised CSS is here:
#top {
position: relative;
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
display: block;
float: left;
width: 50%;
height: 20%;
left: 2em;
}
See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!
Thanks!
This is how I do it:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
Example here
I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
And here's the CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)
Good luck!
This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
See demo.
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
This is the most straight forward solution I could think of.
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}