I cannot change the height of my div with CSS. It does not seem to be taking affect. Code below. I'm coding in C# ASP.NET with Javascipt and CSS. The below code is included in other files using SSI. The height of .navdiv will not alter no matter the value for height:50px.
ASPX
<link rel="Stylesheet" href="CSS/SSI/header.css" />
<div id="header">
<div id="logo">
<img id="imglogo" src="Images/logo.gif" />
</div>
<div id="nav">
<a class="navlink" href="default.aspx">
<div class="navdiv" id="navhome">
Home
</div>
</a>
<a class="navlink" href="import.aspx">
<div class="navdiv" id="navimport">
Import
</div>
</a>
</div>
</div>
CSS
/*
* header.css
* Created By: Steven T. Norris Created On: 5/12/2012
* Update By: Update On:
*
* Stylesheet for header SSI
*/
/*Main header style*/
#header
{
background-color:#2875ff;
border-color:Black;
border-style:solid;
border-width:2px;
padding:0px;
margin:0px;
}
#logo
{
margin-bottom:10px;
}
#navhome
{
height:100px;
}
/*Navigation styles*/
.navdiv
{
height:50px;
background-color:#000999;
display:inline;
margin-left:10px;
padding-right:5px;
padding-left:5px;
font-size:large;
text-align:center;
color:#c24900;
font-weight:bold;
text-decoration:none;
}
.navdiv:hover
{
color:White;
}
#nav
{
padding:0px;
margin:0px;
height:auto;
width:100%;
}
Using display: inline-block; will fix the height issue, but if you want the divs to still be side by side, be sure to add float: left; to both elements.
The height property will not matter on elements with display: inline. It has to be block or inline-block.
Related
I wanted to change div content between clicking 2 links.
I solved it but upon clicking on the 2nd link, if you click on other spaces it will return to the default div. basically what i want is when you click on the second link, and when you click on the space around it, it would not return to previous link! Can anyone help me solve this?
JSFiddle example
CSS:
#button1 {position:fixed;top:120px;left:150px;}
#button2 {position:fixed;top:120px;left:290px;}
#button1:focus~#content #default,
#button2:focus~#content #default
{display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3) {display:block;}
#content {
border:1px dashed black;
width:800px;
height:auto;
position:fixed;
left:150px;
top:150px;
background-color:#E2E2E2;
color:black;
font-size:10px;
text-align:center;
}
#percent,#dollar {display:none;}
#default,#percent{
width:800px;
height:499px;
background-image:url(images/image2.jpg);
}
#dollar{
width:800px;
height:499px;
background-image:url(images/image1.jpg);
}
.bar1{
width:54px;
height:138px;
margin-left:102px;
padding-top:110px;
}
HTML
<a id="button1" href="#" tabindex="1">View in Percentage</a>
<a id="button2" href="#" tabindex="2">View in Absolute Dollar</a>
<div id="content">
<div id="default">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="percent">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="dollar">dollar content will go here.</div>
</div>
try this
html
<div id="main">
<a id="button1" href="#" tabindex="1">View in Percentage</a>
<a id="button2" href="#" tabindex="2">View in Absolute Dollar</a>
<div class="content_one">
percentage viewed
</div>
<div class="content_two">
Absolute dollar viewed
</div>
</div>
css
*
{margin:0;
padding:0;
}
#main
{width:1000px;
margin:0 auto;
}
.content_one
{width:500px;
height:300px;
background:#CCC;
position:absolute;
}
.content_two
{width:500px;
height:300px;
background:#333;
position:absolute;
z-index:-1;
}
js
$("#button1").click(function() {
$(".content_two").hide();
$(".content_one").show();
});
$("#button2").click(function() {
$(".content_one").hide();
$(".content_two").show();
});
Try a little bit of javascript and avoid the css~focus. Fiddle Link. You can use plain javascript to achieve this. No need for extra libraries or anything. Once I removed the focus, the issue of changing the div was solved.
refer the following code
View in Percentage
View in Absolute Dollar
<div id="content">
<div id="percent">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="dollar">dollar content will go here.</div>
</div>
script
function show1(){
document.getElementById('percent').style.display = 'block';
document.getElementById('dollar').style.display = 'none';
}
function show2(){
document.getElementById('percent').style.display = 'none';
document.getElementById('dollar').style.display = 'block';
}
css
#button1 {position:fixed;top:120px;left:150px;}
#button2 {position:fixed;top:120px;left:290px;}
#content {
border:1px dashed black;
width:800px;
height:auto;
position:fixed;
left:150px;
top:150px;
background-color:#E2E2E2;
color:black;
font-size:10px;
text-align:center;
}
#dollar {display:none;}
#percent{
width:800px;
height:499px;
background-image:url(images/image2.jpg);
}
#dollar{
width:800px;
height:499px;
background-image:url(images/image1.jpg);
}
.bar1{
width:54px;
height:138px;
margin-left:102px;
padding-top:110px;
}
Hi im trying to set some divs inline and i dont know what else to do.
.menuboton{
display:inline;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
display:inline;
margin-right:4em;
}
There are two classes, first are 4 divs and the another is one div with an <img> inside. Those divs are inside another div:
#elmenu{
margin:auto;
margin-bottom:10px;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
}
This is my problem: the 4 divs always are slightly below the one with the <img> inside and cross over the container div (elmenu). For fix that I tried setting it display:inline-block and fix the problem of exceds the container limit but still below the one with <img> inside.
Here the html code:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="psds/logo.png" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
</div>
Pics:
Using display:inline;
Using display:inline-block;
I want all divs stay at the same level!
Some guess?
Place the Knowit image in left and the menu in right and edit widths accordingly.
HTML:
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.left{ float: left; width: 150px; }
.right { float: right; width: 150px; text-align:left; }
Edit on OP request:
To center object within div class use:
text-align:center;
to center align the div container use:
margin: 0 auto;
All this information can be found at http://w3schools.com/
You should try to use span instead of div. Also use float:left
vertical-align: middle on #elmenu should do the trick along with display: inline-block; on the logo and menu items.
first you should build your menu from a list or a nav tag.
Inline-block is a good idea, you can easily size and align your elements.
To build your menu you need:
inline-boxes
text-align:center.
line-height
float (just once)
First element (holding logo for instance) can float left.
set a line-height to size (min-)height of the nav bar.
here we come to this : http://jsfiddle.net/GCyrillus/CaR7a/
.menuboton {
display:inline-block;
padding:0.7em;
border-radius: 4px;
background-color: #093;
line-height:1.2em;
}
.menu {
float: left;/* logo */
}
#elmenu {
padding:0;
margin:0;
list-style-type:none;
line-height:48px;/* logo's height */
text-align:center;
border-top:1px solid black;
border-bottom:1px solid black;
}
a {
color:white;
text-decoration:none;
}
<ul id="elmenu">
<li class="menu" id="logo"><img id="imglogo" src="http://placehold.it/1&1" /></li>
<li class="menuboton">Inicio</li>
<li class="menuboton">Posts</li>
<li class="menuboton">Login</li>
<li class="menuboton">Usuario</li>
</ul>
I hope it is useful
Like my comment, the Css should like this
.menuboton{
float: left;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
float: left;
margin-right:4em;
}
UPDATE:
HTML:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="http://www.winphoneviet.com/forum/data/avatars/l/35/35914.jpg?1370081753" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
<div style="clear: both;"></div>
</div>
This's Fiddle
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
I am trying to create a border around an image on the page, and the border works fine in IE8 Normal mode, but fills to 100% of the outer div in IE8 compatibility mode, my css is the following:
.page-layout .page-header .page-image
{
float:left;
vertical-align:top;
width:170px;
}
.page-layout .page-header .page-image div,
.page-layout .page-header .page-image img
{
float:left;
}
.page-image-imgtop
{
background-image:url('/Style Library/images/pagecontent-image-top-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
.page-image-imgleft
{
background-image:url('/Style Library/images/pagecontent-image-bg-left.png');
background-repeat:repeat-y;
float:left;
text-align:right;
clear:both;
}
.page-image-imgright
{
margin-left:7px;
padding-right:8px;
background-image:url('/Style Library/images/pagecontent-image-bg-right.png');
background-repeat:repeat-y;
background-position:top right;
float:left;
clear:both;
}
.page-image-imgbottom
{
background-image:url('/Style Library/images/pagecontent-image-bottom-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
And the following HTML:
<div class="page-image">
<div class="page-image-imgleft">
<div class="page-image-imgtop">
<img src="/Style Library/images/pagecontent-image-top-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-top-right.png" style="float:right" />
</div>
<div class="page-image-imgright">
<img src="MAINIMAGE.jpg" style="border-width:0px;text-align:top;" />
</div>
<div class="page-image-imgbottom">
<img src="/Style Library/images/pagecontent-image-bottom-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-bottom-right.png" style="float:right" />
</div>
</div>
</div>
Not totally sure if I understand what you want to do. But why not trying to add the boarder in the css file?
Remove style="border-width:0px;text-align:top;" from the MAINIMAGE.jpg tag
and add this to .page-image-imgright in the css source
border: 5px solid #000000;
I didn't have any problem with the boarder in IE 8 when I tested this - the border was only around the main image.
Let me know if that solves the problem.
I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.
<body>
<form id="form1" runat="server">
<div id="BGContainer">
<div id="PageContainer">
</div>
<div id="Content">
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="Bottom">
<div id="Copyright">
Copyright
</div>
</div>
</div>
</form>
</body>
In a different file, I have the content for the ContentPlaceHolder
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
<div id="Heading">
Overskrift
</div>
<div id="LeftColumn">
/*Content Here*/
</div>
<div id="CenterColumn">
center
</div>
<div id="RightColumn">
right
</div>
</asp:Content>
The problem is that #MainContent is not resizing in height. It always stays the same height
CSS
html {
height:100%;
}
body {
margin:0;
width:100%;
height:100%;
font-family: Verdana, Sans-Serif;
background-image:url(../Gfx/Design/bg.png);
background-repeat:repeat;
}
#BGContainer {
margin:0px;
background-image:url(../Gfx/Design/Background-top-gradient.png);
background-repeat:repeat-x;
height:210px;
width:100%;
}
#PageContainer {
background-image:url(../Gfx/Design/top-gradient.png);
background-repeat:no-repeat;
height:100%;
width:1016px;
margin-left:auto;
margin-right:auto;
}
#Bottom {
background-image:url(../Gfx/Design/Bottom.png);
background-repeat:no-repeat;
height:32px;
width:964px;
margin-left:auto;
margin-right:auto;
}
#Content {
background-color:#FFFFFF;
background-image:url(../Gfx/Design/content-background.png);
background-repeat:no-repeat;
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
}
#MainContent {
width:980px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}
#Copyright {
color:#000000;
font-size:xx-small;
text-transform:uppercase;
margin-left:50px;
padding-top:5px;
}
#LeftColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#CenterColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#RightColumn {
width:311px;
margin-left:10px;
margin-right:10px;
border: 1px solid gray;
min-height:400px;
float:right;
}
To clear the floats without any additional markup use overflow:hidden
#MainContent {overflow:hidden;zoom:1;}
The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.
The three columns (#LeftColumn, #CenterColumn, #RightColumn) are all floats, so they will not increase the height of #MainContent. Try putting a div (which can be empty) just after those three with clear: both. That will force it to sit below the three columns, and #MainContent will be at least tall enough to include this new div.
If your problem is instead that #MainContent is too tall, note that it has height: 100%, which you could remove (and then apply the above fix). Hope that helps.
You need to clear the floated content.
Insert as follows:
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
<div class="clear"></div>
</div>
... and the CSS:
.clear{clear:both}
use the <p> tag and your text will resize depending on content needs
<div style="width:400px; border-bottom:1px solid teal; padding:20px;">
<p>your text or database field here</p>
</div>
I use the tag when i want a div height to change depending on the amount of text inside.
This example will give you a nice results list when querying from database that places a border in-between results.
Probably because you have a height set on the #BGContainer - if you remove this you might find that the box expands with the text