Ive set up a testing FIDDLE with all the tools we need for tabs working horizontally.
The classes also exist to allow the tabs to work vertically on either the left hand or right hands side using different CSS classes. The problem is they are not then positioned correctly. This I imagine is due to the transform origin attribute but I am struggling.
http://jsfiddle.net/H7gG8/19/
.tabs {
width:400px; height:400px;
}
.tab {
position:relative;
}
.tab li {
border-radius:10px 10px 0 0; height:40px; width:110px; background:#DDD; float:left; cursor:pointer;
}
.tab.v {
-webkit-transform:rotate(90deg);
}
.tab li.l {
width:180px;
}
.tab.r {
-webkit-transform:rotate(-90deg);
}
.tab.r li {
float:right;
}
.tabs .conts {
height:100%; position:relative; clear:both;
}
.tabs .cont {
background:#EEE; height:300px; position:absolute; width:100%;
}
Reset the height attribute of the tab container to that of the entire tab framework ie. height:100%; add a top:-40px to the container and then for vertical tabs add right:0 and top:0;
http://jsfiddle.net/H7gG8/71/
Simples..
Related
Here's what I'm trying to do. I currently have a vertical menu at the very tippy top of my web page. I structured it with this CSS code.
#main ul {
text-align:center;
padding:0;
margin:0;
list-style:none;
}
#main li {
display:inline;
vertical-align:middle;
line-height:50px;
}
#main a:link {
text-decoration:none;
color:black;
transition:0.5s;
padding:30px;
}
#main a:hover {
text-decoration:underline;
color:gray;
background-color:white;
padding:50px;
}
Bad thing is that when I get to the hover, I want the background to also change on top of the background that I've already set with my div. I can't seem to get it in the same height as my div while keeping the width at the place that it was at. What exactly do I have to do with my code to get it to work? Thanks in advance.
Add this CSS rule to make the a elements fill their parent elements:
#main a {
display: block;
with: 100%;
}
This is my website footer . as you an see it's not well aligned . i just need to align the text . list header and sub listings should come in same alignment . how can i do that ? i've used UL and LI
Since you are using display:inline on the UL elements, all you have to add is vertical-align:top.
You will need the following CSS:
* {
margin:0;
padding:0;
}
#footer {
background-color: rgb(70,221, 93);
height:250px;
padding:40px 0;
width:100%;
}
#footer > div {
text-align:center;
width:24%;
display:inline-block;
vertical-align:top; /* See this line its important for all the 'headers' to align properly */
}
#footer > div > span {
margin:0 0 30px 0;
display:block;
font-weight:bold;
}
a {
display:block;
color:White;
text-decoration:none;
margin-bottom:10px;
}
See this here: http://jsfiddle.net/StARu/
Hope this helps!!!
Hi guys I'm new and making progress in css design. I tried setting the border, margin, padding to 0 of container that has a gray background, but I can't remove the whitespace above, below, left and right. How do I remove it and stretch to fit the browser without extra white space on top, bottom left and right?
Here's what I have so far. Thanks :) http://jsfiddle.net/blackknights/3yhRt/embedded/result/
#charset "utf-8";
/* CSS Document */
#container {
min-width:1024px;
min-height:768px;
background:#CCC;
border:0;
padding:0;
margin:0;
}
#container2 {
width:1080px;
background-color:#FFF;
min-width:1024;
}
#wrapper {
min-width:800;
min-height:600px;
}
#header {
width:900px;
min-height:120px;
background-color:violet;
}
#menubar {
width:900px;
height: 30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
}
ul {
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li {
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link {
text-decoration:none;
} /* unvisited link */
a:visited {
text-decoration:none;
} /* visited link */
li:hover {
background-color:#ffd640;
}
ul#mcolor li:hover > a {
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
try:
body{
margin:0px;
padding:0px;
}
Try
body,html
{
min-width: 100%;
}
I agree with #ra_htial
I have updated fiddle for the same
Please refer and reply.
i want to display my webpage in all the browser versions...my code is working fine in mozilla and chrome but not working properly in internet explorer.
here is the css code which is not compatible with IE it's seems....
EDIT
Struggling to create a web page for cross browser and multiple resolution support for the past 2 months,As my design have multiple issues with resolution and browser support.i am new to this designing thing and i dont have any idea on how to this.i saw a article regarding multiple resolution support which states that we have to use regular css code which is supported by all the browsers under all resolutions.Also i heard that we have to put our normal <div></div> inside a container,so that the design will never collide which each other when it is viewed under lower resolution.below is my css code which will work under 1680X1050 and only in Mozilla.currently iam using a template which works fine under all circumstances.give me some sample examples of a perfect design so that i will learn to design my own
#image img
{
padding:6px;
border-top:0px solid #ddd;
border-left:0px solid #ddd;
border-bottom:0px solid #c0c0c0;
border-right:0px solid #c0c0c0;
display:inline;
position:relative;
top:-210px;
margin-left:auto;
margin-right:auto;
}
#hori
{
width: 70em;
margin-left:350px;
position:absolute;
}
#hori ul li
{
display:inline;
float:left;
list-style:none;
}
#hori ul
{
padding:0;
margin-top:-620px;
}
#hori li
{
display: inline;
padding:0;
text-align:center;
width:7em;
float:left;
list-style:none;
height:25px;
margin-left:15px;
background:#38ACEC;
-moz-border-radius: 70px;
border-radius: 70px;
}
#verti
{
float:bottom;
width:200px;
margin-top:50px;
position:relative;
display: inline;
}
#verti ul li
{
list-style:none;
text-decoration:none;
}
#verti ul
{
padding:0;
margin:0;
}
#verti li
{
width:150px;
background:#38ACEC;
margin-bottom:9px;
position:relative;
top:170px;
-moz-border-radius:80px;
border-radius:80px;
text-align:center;
}
#slideshow
{
position:relative;
height:500px;
right:-570px;
top:-280px
}
#slideshow img
{
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active
{
z-index:10;
}
#slideshow img.last-active
{
z-index:9;
}
table,th,td
{
border:1px solid black;
width:650px;
position:relative;
right:-480px;
margin-top:-35%;
}
th
{
background-color:#38ACEC;
color:white;
}
Since you didn't ask any question may I presume the question is: how should I make this css compatible in IE browsers?
There are actually several ways to do this:
Find out wich css properties are not functioning correct in IE check this site for some common CSS mistakes http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Add an inline filter to render different css when using IE followed with the IE compatible css if you want to make this negative just add ! before the condition.
make 2 different css files wich are included in the top of your html page with the same filter
<!--[if lt IE #version]>
<link rel="stylesheet" type="text/css" href="styleIE.css" />
hope this helps you out.
You can look here:
http://jsfiddle.net/vsjwww/n7kk3/17/
It all works fine, but as you see, the div, which will slide down, starts slide above the other div.
It looks like a CSS problem, how can we solve it?
Thanks..
Demo
You need the dropdown div to have the following css:
#will_slideDown
{
position:absolute;
top:100%;
left:0px;
}
and #has_hover_function needs position:relative;
Absolutely position the inner element at the bottom border of the outer element:
#has_hover_function, #will_slideDown
{
position:relative;
width:150px;
height:25px;
font-family:Arial;
text-align:center;
padding-top:3px;
border:1px solid gray;
background-color:#e7e7e7;
}
#will_slideDown {
position:absolute;
top:29px; /* 1px + 3px + 25px; */
left:0;
}