Need a quick bit of help please, I have knocked up a quick fiddle.
Link Here: http://jsfiddle.net/ozzy/qaN84/
css:
.outer {
width:210px;
height:180px;
padding:10px;
border:1px solid #aaaaaa;
border-radius:3px;
}
.month {
width:40px;
height:40px;
float:left;
margin:5px 5px;
border:1px solid #aaaaaa;
display:inline;
background-color:#efefef;
}
.month h3 {
font-size:16px;
font-weight:bold;
color:#444444;
text-align:center;
vertical-align:middle;
line-height:18px;
margin-top:10px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
text-transform:uppercase;
}
#current {
background-color:#dedede;
border:1px solid #ec008c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.5) inset;
}
.month h3:hover {
color:#ec008c;
cursor:pointer;
}
.gallLink {
float:right;
margin-right:10px;
}
.gallLink a{
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
font-weight:normal;
text-decoration:none;
text-transform:uppercase;
font-size:12px;
color:#3399ff;
}
.gallLink a:hover{
color:#ec008c;
border-bottom:1px dotted #ec008c;
}
html:
<div class="outer">
<div class="month"><h3>jan</h3></div>
<div class="month"><h3>feb</h3></div>
<div class="month"><h3>mar</h3></div>
<div class="month"><h3>apr</h3></div>
<div class="month"><h3>may</h3></div>
<div class="month"><h3>jun</h3></div>
<div class="month" id="current"><h3>jul</h3></div>
<div class="month"><h3>aug</h3></div>
<div class="month"><h3>sep</h3></div>
<div class="month"><h3>oct</h3></div>
<div class="month"><h3>nov</h3></div>
<div class="month"><h3>dec</h3></div>
<div class="gallLink">View Gallery</div>
What I want is whan user hovers onto one of the month squares, the hover effect kicks in. At the moment it only has effect when I hover over the text.
Also am I coding this the most efficient way possible? with regard to Highlighting current month ?
Or is there a better way.
Any help appreciated
Is this what you are looking for?
http://jsfiddle.net/qaN84/2/
.month:hover h3 {
color:#ec008c;
cursor:pointer;
}
You may also want to add:
.month:hover{
cursor:pointer;
}
Related
I want to be able to hover a link and not have the top border from the link below show up.
If you check out the fiddle you will see what I mean. Any help on this would be greatly appreciated. Thank you =)
http://jsfiddle.net/p0wt9q6w/
Here is my CSS code:
#homeMenu {background:#d7d7d7;; position:relative; height:400px; top:20px;}
#homeMenu a {
display:block;
color:#5d5d5d;
font:14px Arial, Helvetica, sans-serif;
padding: 20px 0;
border-top: 1px solid #fff;
border-bottom:1px solid #d7d7d7;
text-indent:15px;
text-decoration:none;
box-sizing:border-box;
}
#homeMenu a:hover {background: #fff; color:#00694f; border-top:1px solid #00694f; border-bottom: 1px solid #00694f;}
#homeMenu a:first-child {border-top:1px solid #d7d7d7;}
#homeMenu a:first-child:hover {border-top:1px solid #00694f;}
#homeMenu a.active {background: #fff; color:#00694f; border-top:1px solid #00694f; border-bottom: 1px solid #00694f;}
#homeMenu span {position:absolute; right:15px;}
Here is my HTML:
<div id="homeMenu">
What is a credit union <span>></span>
Open an Account <span>></span>
Calculators <span>></span>
News and Events <span>></span>
Online Payments <span>></span>
Online Appointments <span>></span>
</div><!--homeMenu close-->
<html>
<head>
<style type="text/css">
#wholeborder{
background-color : #f2f2f2;
border-radius:5px;
border:1px solid #222;
resize:both;
width:700px;
height:320px;
overflow:auto;
}
#navigatorForLinkedIN{
height:70px;
}
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px;
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
ul#breadcrumbs li{
float:left;
background:;
height:30px;
padding:0 23px 0 10px;
text-align:center;
text-decoration:none;
text-color:#7a7a7a;
line-height:32px;
}
ul#breadcrumbs li.active{
background:url(../images/greenNav.png)no-repeat right;
color:#fff;
}
ul#breadcrumbs li a{
display:block;
text-decoration:none;
color:#2d2d2d;
line-height:32px;
text-shadow:0 0 1px #222;
}
ul#breadcrumbs li a:hover{
color:#000000;
background: url(../images/greenNav.png);
}
</style>
</head>
<body>
<div class="wholeborder" id="wholeborder">
<div class="navigatorForLinkedIN" id="navigatorForLinkedIN">
<ul id="breadcrumbs">
<li class="active">Connect with LinkedIn</li>
<li>Invite Friends</li>
<li>Complete Profile</li><a href="">
</a></ul><a href="">
</a></div><a href="">
</a><div class="linkedInLoginBox"><a href="">
<div class="head">
Discover contacts that can help you land your next job
</div>
</a><div class="body"><a href="">
</a><a class="sn-in" href="" title="Sign into LinkedIn" id="sn-lk-sign" rel="nofollow"><span class="sn-in-sign-span">Sign into LinkedIn</span></a>
<div class="disclaimer">
All information and activity will be kept private. Learn More
</div>
</div>
</div>
</div>
</body>
</html>
This is my html page
the margin is 100px, thats whats pushing it down
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px;
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
change the margin in this, 100 is pushing it down, you can use stuff like.
margin-top:;
margin-left:;
margin-right:;
margin-bottom:;
You have a style on ul#breadcrumbs: margin:100px; You can change it to margin:0 100px 100px.
Still, you may also want to set the body and html containers' margin and padding:
html, body{
margin:0;
padding:0;
}
I updated your fiddle you can check from link.
Updated Code:
/* optional */
margin:10px 100px;
Original one was margin:100px it means 100px from all sides. But 10px 100px means, top/bottom:10px | left/right:100px;
Your Updated Fiddle: http://jsfiddle.net/sLV5h/2/
Check the Js fiddle
http://jsfiddle.net/Ydbre/
Removed margin:100px in ul#breadcrumbs
Like say in the fiddle http://jsfiddle.net/sLV5h/1/ :
The answer was to change
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px; <-------This Line
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
ul#breadcrumbs{
list-style:none;
/* optional */
margin:0px 100px 100px 100px; <----- by this (or something else)
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
( salutation to The Dark Knight )
I have this little bit of text on my page:
I need to place the month (DEC) on top of the year (2013). How can I do this with CSS?
Using BR, or floats, seems to lead to all kinds of crazy formatting problems. Obviously, as the date changes, so does the width, so I can't lock it into a fixed width.
What I have so far:
html
<span class='month'>DEC</span><span class='year'>2013</span>
css
margin-left:20px;
position:relative;
top:-12px;
padding:12px 20px;
font-size:18px;
text-align:right;
Check this one, DEMO http://jsfiddle.net/yeyene/VPZgV/2/
HTML
<div class="day">
<span class="date">31</span>
<div class="mth_yr">
<span class='month'>DEC</span>
<span class='year'>2013</span>
</div>
</div>
CSS
.day{
float:left;
padding:10px;
background:#F0EAE9;
font-family:Georgia, "Times New Roman", Times, serif;
}
.date{
float:left;
padding:8px 10px 2px 10px;
border-right:3px solid #fff;
font-size:30px;
font-weight:bold;
height:50px;
background:#E9A3A0;
color:#fff;
}
.mth_yr{
float:left;
width:35px;
height:50px;
padding:10px 10px 0px 10px;
background:#E9A3A0;
color:#fff;
}
I am trying to make a portfolio kind of thing with HTML and CSS and my layout looks really good on my resolution of 1920 * 1080 but when i change the resolution everything moves around and everything looks really bad.
Can anybody point out to me where I am going wrong with my code and provide me with a solution to my problem?
--- Edited new code
How it looks on 1920 * 1080:
http://screencast.com/t/mq8H3baBxIi
So i have changed the advised things but i'm still getting that, for example, when i change from my screen resolution of 1920 * 1080 to 1280 * 1024 to test how it looks the comment areas pull on top of the grey 'contact me' box so that it ends up like me picture on this link:
http://screencast.com/t/xZEwSgwdqP
<html>
<head>
<link rel="stylesheet" type="text/css" href="portfolioStyles.css" />
</head>
<body>
<div id="pageTitleContact"> CONTACT ME</div>
<div id="sideBar"> </div>
<div id="commentSideBar"> </div>
<div id="logos">
<ul>
<div id="home"><li><img src="home.png" alt="list item 1" /></li></div>
<div id="aboutMe"><li><img src="aboutMe.png" alt="list item 2" /></li></div>
<div id="achievements"><li><img src="achievement.png" alt="list item 3" /></li></div>
<div id="hobbies"><li><img src="Hobbies.png" alt="list item 4" /></li></div>
<div id="contactMe"><li><img src="contactMeHighlighted.png" alt="list item 4" /></li></div>
</ul>
</div>
<textarea id="contactMeTextarea">
</textarea>
<div id="Commentsection">
<form action="postcommentandreturn.php" method="post">
<div id="nameAreaTitle">
Name:</div><input type="text" id="nameArea" name="name" />
<br>
<textarea placeholder="Insert Comment Here..." type="text" id="commentArea" name="comment"></textarea>
<div id="submitLocation"><input type="submit" id="submitComment" value="Submit"/></div>
</form>
</div>
<!--comment section-->
<div id="postedComments">
<tr>
<td><div id="postersName"> </div>
</td>
</tr>
<tr>
<td><div id="commentDate"></div></td>
</tr>
<tr>
<td>
<textarea id="postersComment"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
#sideBar {
background-color: #111111;
width:100px;
height:100%;
position:fixed;
z-index:-1;
}
#commentSideBar {
background-color: #111111;
width:300px;
height:100%;
position:fixed;
z-index:-1;
right:0;
}
#logos {
position:absolute;
margin-left:-20px;
}
#home {
margin-top:50px;
}
#homeInfo {
resize: none;
position:fixed;
display: block;
height:400px;
width:800px;
overflow:hidden;
outline:none;
background-color:#3f3f3f;
color:white;
font-family:Arial;
font-size:30px;
border-radius:10px;
font-weight:700;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
max-width:800px;
margin-left:-350px;
margin-top:-200px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#pageTitleContact {
position:fixed;
top: 50%;
left: 50%;
margin-top:-400px;
margin-left:-400px;
color:limegreen;
font-size:100px;
font-family:Arial;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
padding-left:20px;
padding-right:20px;
}
#aboutMe {
margin-top:100px;
}
#achievements {
margin-top:100px;
margin-left:-7px;
}
#hobbies {
margin-top:100px;
}
#contactMe {
margin-top:100px;
margin-bottom:50px;
}
#contactMeTextarea {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
resize: none;
position:fixed;
display: block;
height:600px;
width:1000px;
max-width:1000px;
outline:none;
background-color:#3f3f3f;
color:whitesmoke;
font-family:Arial;
font-size:30px;
border-radius:10px;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
margin-left:-500px;
margin-top:-300px;
padding-top: 50px;
}
#Commentsection {
position:fixed;
top:50%;
margin-left:140px;
margin-top:-300px;
}
#nameAreaTitle {
font-family:Arial;
color:black;
font-weight:bold;
}
#nameArea {
font-family:Arial;
color:black;
width:300px;
height:40px;
font-size:30px;
}
#commentArea {
font-family:Arial;
color:black;
width:300px;
height:300px;
resize: none;
margin-top:10px;
font-size:20px;
}
#submitComment {
width:100px;
font-size:20px;
}
#postedComments{
position:absolute;
right:0px;
margin-top:10px;
margin-right:10px;
width:280px;
background-color:grey;
}
#postersName {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
font-weight:bold;
margin-top:10px;
}
#commentDate {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
}
#postersComment {
width:275px;
height:200px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
resize:none;
}
li {
list-style-type:none;
}
Without looking at it too closely, you can probably add a container div or something that wraps all your code up, and then assign a min-width attribute to ensure that it never goes smaller than the given size.
Your layout seems to be relying on the width of your body and as your window size changes so will the width of your body. Having a wrapper with a min-width or declared width will make it so a horizontal scroll bar will appear when users have a window smaller than the width of your container.
And like others have stated, you have some nesting issues. General page layout will look like this:
<html>
<head>
<!-- Head Content -->
</head>
<body>
<!-- Page Content -->
<ul>
<li><!-- List Item --></li>
<li><!-- List Item --></li>
</ul>
</body>
</html>
I have searched google, but I didn't find anything. I searched this site and found this topic Unwanted space between divs which seems similar, and i have tried to apply
margin:0px;
several places, but there i still, space between the two divs.
Heres my html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title/title>
<link rel="stylesheet" type="text/css" href="e.css">
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<div id="usr">
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
And my Css
html {
height: 98%;
}
body {
height:99%;
}
#page {
height:99%;
}
#content {
/*border:2px solid blue;*/
}
#bottom {
border:2px solid green;
height:15%;
vertical-align: bottom;
}
#up {
/*border:dotted green 2px;*/
width:59%;
}
.usrcom {
border-bottom: 2px dotted blue;
margin-left:15px;
margin-right:15px;
}
#usrp {
width:100%;
clear:both;
border-right: 2px solid blue;
border-left: 2px solid blue;
border-bottom:2px solid blue;
border:dotted yellow 2px;
}
/***Tabs menu*****/
#tabmenu {
float:left;
width:685px;
/*background:#BBD9EE;*/
/*background:#FF6633;*/
font-size:93%;
line-height:normal;
margin-top: 0px;
margin-left: 0px;
/*border:dotted red 2px;*/
border-bottom:2px solid blue;
/*border:dotted red 2px;*/
}
#tabmenu ul {
/*background:#BBD9EE;*/
padding:0px 0px 0 0px;
margin:0px;
list-style:none;
border:dotted green 2px;
}
#tabmenu li {
display:inline;
padding:0;
margin:0px;
}
#tabmenu a {
float:left;
/*background:url("img/tableft2.png") no-repeat left top;*/
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabmenu a:hover span {
background-color:#3399FF;
margin:0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#tabmenu a span {
float:left;
display:block;
/*background:url("img/tabright2.png") no-repeat right top;*/
padding:5px 15px 4px 5.5px;
margin:0px;
color:#FFFFFF;
background-color:#0000FF;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
I can find out why the space happens, how can I solve this unwanted space.
Edit:
Ups, yearh, forgot to tell which divs,
It is between 'Tabmenu' and 'usrp'
Edit:
Tried to apply in my css
#tab {
margin: 0px;
padding:0px;
}
For it is in really between 'tab' and 'usrp' but that does no help.
In CSS:
#tabmenu {
margin:0;
}
should do the trick
Learn how to use an inspector and "inspect this element". Then you can hover over all the elements on your page and literally see their margins/paddings, and what CSS is causing them. You can even edit CSS on-the-fly to test out a fix before applying it. My preference is the Firebug add-on for Firefox, but Chrome, Safari, and even Internet Explorer all have them built in now.