|
CSS - Div Location
Im having problems dividing 2 divs into 2 columns. In the following code , I would like "category odd" to appear on left, and "category even" on right- on the same row
The current css for the columns is: .categories .categories1, .categories .categories2 {display:inline-block} Working perfect in firefox, not working at all in explorer 6+7. Quote: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .categories {width:950px;} .categories .categories2 { display:inline-block; width:400px; } .categories .categories1 { display:inline-block; width:400px; } .categories .categories1 .categoriesheader1 {width:300px} .categories .categories2 .categoriesheader2 {width:300px} --> </style> </head> <body> <div class="categories"> <div class="categories1"> <div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div></div> <div class="categories2"><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div></div> </div> </body> </html> Similar TutorialsHi, am okay to CSS, but i have a problem i just can solve, i hope one of you can help. I have a gallery site, what i have not create my self, download and install type of thing and i have made a custom header menu, but i can not get et to locate correctly. As you can see on this site pictures.rcheli.dk there is a menu at the top " Home | RC Earth | Blog | Pictures | Contact " and i can get i to align to the right. If i resize the windows it scales with the window. You can see here rcheli.dk how i wold like it to work, the location of the menu. Can anybody help me with this issue, i think i have tried every thing. I have a tab bar that sits on top of two div columns. The bar is supposed to sit in the center of the top of the left column. I can achieve this perfectly via Code: position: absolute; top: 16%; left: 30%; The problem here lays in the fact that anyone NOT running my screen resolution is telling me that it's not where it's supposed to be. How can I put this where it needs to be, regardless of who is viewing it, and how crappy their PC might be? I'm currently working on a very basic website, which seems on the edge of finishing. www.meltonbusiness.co.uk Tiny hiccup remains is that the image RIGHTLY appears on "content area's" top right in Firefox but the same image appears right at the bottom of the Content. Can anyone help. My CSS at this stage looks like: Code: html, body
{
margin:0;
padding:0;
}
body
{
font:75% verdana, arial, sans-serif;
background:white;
}
p
{
margin:0 10px 10px;
padding:0;
}
h1
{
height:100px;
line-height:100px;
text-align:center;
font-family:"lucida calligraphy", verdana, arial, helvetica, sans-serif;
font-size:36px;
color:#534;
margin:0;
}
.spacer
{
clear:both;
background:url(spacer.png) top left;
}
.montage
{
background-color:black;
text-align:center;
clear:both;
height:80px;
}
.wrapper
{
float:left;
width:100%;
}
.content
{
margin:0 260px 0 100px;
padding:5px 0 0 10px;
}
.content ul
{
display:block;
}
.content li
{
display:block;
list-style-type:disc;
padding:5px 0px 5px 0px;
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
letter-spacing:0.2px;
text-align:justify;
}
p
{
line-height:1.4;
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
letter-spacing:0.2px;
text-align:justify;
}
h2
{
font-size:20px;
border-bottom:solid thin #666666;
color:blue;
font-family:Georgia, "Times New Roman", Times, serif;
}
.heading
{
font-weight:bold;
text-decoration:underline;
}
.nav
{
float:left;
width:100px;
margin-left:-100%;
margin-top:20px;
}
.nav ul
{
list-style-type:none;
margin:0;
padding:0;
}
.nav ul li
{
display:block;
margin-top:0;
background:url(navbg.png) left repeat-x;
border-bottom:1px solid #000;
font-weight:700;
padding:10px;
}
.nav a
{
color:white;
text-decoration:none
}
.nav a:hover
{
color:yellow;
text-decoration:none;
}
.nav img
{
margin-top:30px;
}
.right_col
{
background:red;
float:right;
width:250px;
margin-top:20px;
margin-right: 0px;
margin-left: -250px;
}
.advert
{
position:relative;
float:left;
left:20px;
background-color:#CCCCCC;
width:80%;
color:#006600;
padding:20px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
}
.advert a
{
text-decoration:none;
color:red;
}
.advert a:hover
{
text-decoration:underline;
}
.footer
{
float:none;
width:100%;
border:1px solid #322;
padding:10px;
background-color:#a54;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
letter-spacing:1px;
color:white;
}
.footer a
{
text-decoration:underline;
color:white;
}
.footer a:hover
{
text-decoration:overline;
color:#F0F8FF;
}
hr
{
text-align:left;
width:100%;
color:maroon;
background-color:maroon;
height:1px;
}
How to change current page to other location after few seconds by using css script. Succeed by using meta refresh & onload in HTML but how to do in css. Thanks & Regards Can anybody help with a code to change the location of a dropdown menu to appear over the image on hover?? I have the code working perfect but can not get the location... <a href="(will be page in site)" class="menuanchorclass" rel="anylinkmenu4"> <img src="images/kids-button.gif" width="260" height="263" alt="Kids" style="border-width:0" /></a> What I don't like about my code below is that space is kept for Sections A and B, even when they are not visible. Code: <div id="container">
<div id="A">
Section A.
<input type="button" value="Toggle extra" onClick="toggleExtra()">
<span id="extra"></span>
</div>
<div id="B">
Section B.
</div>
</div>
What I really want is for Section A to take the place of Section B when the other button is clicked. Purpose: I want the user to arrive at my web page and click a button to establish why they are there. If for A, they will be shown content for topic A. If for B, content for topic B. (Further illustration: If you toggle the extra text on in section A and then view Section B, the blank area for Section A is that much bigger...) Functional but incorrect code: Code: <html>
<head>
<link rel=stylesheet href="../common.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//<![CDATA[
function switchIt(mode) {
if (mode == 'A') {
document.getElementById('A').style.visibility = 'visible';
document.getElementById('B').style.visibility = 'hidden';
}
else {
document.getElementById('A').style.visibility = 'hidden';
document.getElementById('B').style.visibility = 'visible';
}
}
var toggle = -1;
function toggleExtra() {
toggle *= -1;
if (toggle == 1) {
document.getElementById('extra').innerHTML = "<br>extra";
}
else {
document.getElementById('extra').innerHTML = "";
}
}
//]]>
</script>
<STYLE TYPE="text/css">
<!--
body {
text-align: center;
}
#container {
margin:0 auto 0 auto;
width:400px;
border:2px outset white;
}
#A {
visibility:hidden;
border:2px outset white;
}
#B {
visibility:hidden;
border:2px outset white;
}
-->
</STYLE>
</head>
<body>
<form>
<input type="button" value="Show section A" onClick="switchIt('A')">
<input type="button" value="Show section B" onClick="switchIt('B')">
</form>
<div id="container">
<div id="A">
Section A.
<input type="button" value="Toggle extra" onClick="toggleExtra()">
<span id="extra"></span>
</div>
<div id="B">
Section B.
</div>
</div>
</body>
</html>
Thanks! oak island I have a page where the <select> is very screen right. it has little room to show the full name in the <option> so i do like "S - Summary". You only end up seen the S. When the dropdown happens, my clients wants to see the whole name. This works in FF, but not IE. Can i via CSS control the location of the options. Say move them left 50px. Thanks. I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. |
|||||||