Why this code shows border 7px
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
border: 7px solid #FFFD33;
<!-- width: 125px; -->
}
but if I put border: 7px solid #FFFD33;after commeting:
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
<!-- width: 125px; -->
border: 7px solid #FFFD33;
}
it doesn't ?
Try changing
<!-- width: 125px; -->
to
/* width: 125px; */
CSS uses different commenting and embedded HTML comments might break the declaration.
Related
How to display an iframe code by mouse over (hover) a different link? I tried this but it's not working;
<style>
iframe#xyz {
border: 2px solid #9a9a9a;
margin-left: 60px;
display: none;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
a#abc:hover iframe#xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
</style>
<a class="linkclass" id="abc" href="link">link</a>
<iframe id="xyz" src="page.html"></iframe>
What am i doing wrong?
You're selecting it wrong, use:
a#abc:hover {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Select a link with an id of abc.
If you want to show the iframe however, you must use the sibling selector +
use this:
a#abc:hover + #xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Do it this way
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#xyz{
display: none;
}
.linkclass:hover + #xyz{
display: block;
}
</style>
</head>
<body>
Click Here To View Map
<iframe id="xyz" src="#" width="870" height="300"></iframe>
</body>
</html>
I am trying to create a fluid page layout with a fixed header. But I am having issues with making the fixed header fluid.
Here is the code:
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
top: 0;
border: 1px solid red;
height: 55px;
width: 100%;
}
<section class="container">
<header>
</header>
</section>
Js Fiddle Link: http://jsfiddle.net/s2myn87q/4/
Since most browsers use the following style in their default stylesheet:
body {
margin: 8px;
}
You can use
header {
left: 8px;
right: 8px;
width: auto; /* default value */
}
body {
margin: 8px;
}
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
left: 8px;
right: 8px;
top: 0;
border: 1px solid red;
height: 55px;
}
<section class="container">
<header>
</header>
</section>
i have this main_window div which is 800px wide, and 550 px height, then there is two divs that should be next to it, troubleshooting_area and timeline div, those two make up for the 550 in height but need to be floating to the right of the main window
the two divs below should be next to the main window, how can i achieve that??
here is a demo http://jsfiddle.net/S8RC3/3/
<div class="appview_fullscreen app_ama">
<center><strong>Auto Mechanics Alliance</strong> </br>
<i>let us come together and become one</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
body
{
width: 100%;
height: 100%;
margin: 0px;
}
.appview_fullscreen
{
width: 1005px;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.main_area
{
border: 2px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
}
.main_window
{
min-height: 550px;
border: 1px solid green;
width: 800px;
margin: 2px 1px 1px 1px;
}
.troubleshoot_area
{
border: 1px dotted green;
height: 200px;
width: 200px;
}
.timeline
{
border: 1px solid green;
height: 350px;
width: 200px;
}
In your case, I would simply add:
position: absolute;
top: 76px;
left: 808px;
to your .timeline and .troubleshoot-area classes.
You can see an updated fiddle here: http://jsfiddle.net/S8RC3/4/
Try these ways.
CSS
body
{
width: 99%;
height: 100%;
margin: 0px;
}
.appview_fullscreen
{
width: 1005px;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.main_area
{
border: 2px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
}
.main_window
{
min-height: 550px;
border: 1px solid green;
width: 800px;
margin: 2px 1px 1px 1px;
display:inline-block;
}
.troubleshoot_area
{
border: 1px dotted green;
height: 200px;
width: 200px;
position: absolute;
top: 76px;
left: 808px;
}
.timeline
{
border: 1px solid green;
height: 350px;
width: 200px;
float:right;
position: absolute;
top: 76px;
left: 808px;
}
DEMO Fiddle
here is a quick sketch of what I'm trying to accomplish. Nvm, I am not skilled enough to make this work in this box.
I have written some, I will make a jsfiddle with it,
here it is
I want the 3rd div to sit at the same height as the 1st one. Tried many things, including margin -percentages. Is there something I missed? I got it to sit at the height of the 2nd div pretty easily.
css:
#col11{
margin: 0;
float: top;
width: 50%;
height: 100;
border: 1px red solid;
}
#col12{
margin: 0;
float: left;
width: 50%;
height: 400;
border: 1px blue solid;
}
#col21{
margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500;
border: 1px pink solid;
}
Just change the order of the div and you are good to go
Demo
HTML
<div id="col11"></div>
<div id="col21"></div>
<div id="col12"></div>
And don't use float: top;, top is not a valid value, use left instead
CSS
#col11{
margin: 0;
width: 50%;
height: 200px;
border: 1px red solid;
float: left;
}
#col12{
margin: 0;
float: left;
width: 50%;
height: 300px;
border: 1px blue solid;
}
#col21{
margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500px;
border: 1px pink solid;
}
I am new to CSS and I am trying to make my first website as css but I am having a problem getting the two boxes to align side by side for the body and the four boxes above that don't stay next to each other. I have played around with Float and position with no luck.
You can see the site here: http://gdisinc.com/barker/default.php
I'm trying to get it to look like this: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Could you please tell me what I am doing wrong and how I can fix it? Thank you!
just updated your css with my css that will work perfectly there were few bugs you made so i sort it out those points so now its working fine updated your with mentioned below css :-
CSS
div#main {
margin: auto;
overflow: hidden;
width: 902px;
}
div#outerbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: left;
height: 300px;
width: 660px;
}
div#innerbox {
background-color: #4D1516;
border: 1px solid #000000;
height: 277px;
margin-left: 10px;
margin-top: 10px;
width: 640px;
}
div#sideouterbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: right;
height: 300px;
width: 222px;
}
First you're at the very limit in box width, try making it a bit smaller
after that use
display:inline-block;
if the sum of the boxes width fit in the container you should have no problem.
Hope this helps
Solution without floats and weird overflow:hidden statements, just standard positioning...
div#main {
margin: auto;
position: relative
width: 902px;
}
div#outerbox {
border: 2px solid white;
height: 300px;
width: 669px;
background-color: #A2282C;
position: absolute;
}
div#innerbox {
margin: 10px;
border: 1px solid black;
height: 277px;
background-color: #4D1516;
}
div#sideouterbox {
border: 2px solid white;
height: 300px;
width: 222px;
background-color: #A2282C;
position: absolute;
right: 0;
}
div#sideinnerbox {
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
height: 280px;
width: 198px;
background-color: #4D1516;
}
Just copy this over your styles and you should be fine.