I am self-taught in HTML and CSS, but one problem I have recently been running into is modifying links with CSS. I have done it in the past before, many times with no error, but now all the ways I can think of and that I find on the internet do nothing.
I have tried all of these ways, and none worked:
a.linkclass:link{text-decoration:none;}
.linkclass a:link{text-decoration:none;}
#linkid a:link{text-decoration:none;}
a#linkid:link{text-decoration:none;}
{note, these were not done all at the same time, just examples}
My HTML and CSS are as follows(after looking over and over, I could find nothing wrong that could cause these problems)
body{
margin:0;
background-color:eaf7ff;
}
#menubar{
max-height:10%;
min-height:3%
height:5%;
background-color:BBBBBB;
border-bottom:1px solid black;
max-width:100%;
min-width:100%;
width:100%;
float:left;
position:fixed;
display:inline-block
}
#pushbox{
max-height:10%;
height:10%;
background-color:black;
max-width:100%;
min-width:100%;
width:100%;
}
#box1{
background-color:eaf7ff;
}
#tag1{
background-color:eaf7ff;
margin:0;
}
#box2{
background-color:fff7ea;
}
#tag2{
background-color:eaf7ff;
margin:0;
}
#box3{
background-color:eaf7ff;
}
#tag3{
background-color:eaf7ff;
}
#box4{
background-color:fff7ea;
}
#tag4{
background-color:eaf7ff;
}
#box5{
background-color:eaf7ff;
}
#tag5{
background-color:eaf7ff;
}
#copyright{
}
.content{
max-width:100%;
min-width:100%;
width:100%;
min-height:80%;
height:85%;
}
.contenttag{
max-height:10%;
height:10%;
max-width:100%;
min-width:100%;
width:100%;
}
a.menulink{
border:1px solid black;
background-color:red;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: none;
color:black;
}
a:active {
text-decoration: none;
color:black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- ==========MENUBAR==========-->
<div id='menubar'>
<h1>
<a href='#tag1' class='menulink'>OPT1</a>
<a href='#tag2' class='menulink'>OPT2</a>
<a href='#tag3' class='menulink'>OPT3</a>
<a href='#tag4' class='menulink'>OPT4</a>
<a href='#tag5' class='menulink'>OPT5</a>
</h1>
</div>
<!-- ==========CONTENTBOX1==========-->
<div id='tag1' class='contenttag'></div>
<div id='box1' class='content'>
<h1>ContentBox1</h1>
</div>
<!-- ==========CONTENTBOX2==========-->
<div id='tag2' class='contenttag'></div>
<div id='box2' class='content'>
<h1>ContentBox2</h1>
</div>
<!-- ==========CONTENTBOX3==========-->
<div id='tag3' class='contenttag'></div>
<div id='box3' class='content'>
<h1>ContentBox3</h1>
</div>
<!-- ==========CONTENTBOX4==========-->
<div id='tag4' class='contenttag'></div>
<div id='box4' class='content'>
<h1>ContentBox4</h1>
</div>
<!-- ==========CONTENTBOX5==========-->
<div id='tag5' class='contenttag'></div>
<div id='box5' class='content'>
<h1>ContentBox5</h1>
</div>
<!-- ==========COPYRIGHT==========-->
<div id='copyright'><center>
copyright © Vladimir Plenskiy <?php echo date("Y"); ?>, Template by Timothy Leitzke
</center>
</div>
</body>
</html>
The 'a.menulink' by itself did not work. (Sorry if this is confusing, it is currently 12:14 AM and I have also been working on a project in Unity and some art on my computer for the past 24+ hours)
--edit--
for those who do not understand what my problem is, even though the format is right. The CSS styling using classes and ids does not work(the examples that I tried are all at the first CSS stylesheet. that style sheet is not one used on the page, as seen in the header, only ONE is used)
According your HTML proper CSS for your links should be:
.menulink:link {text-decoration:none;}
Related
I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
<div id="visible" style="float:left;">
<img src="image1.jpg" id="boom">
</div>
<div id="first" style="float:left; ">
<span class="bob">Flatkit</span>
</div>
I tried the following code,but it didn't helped me.
#visible #first:hover ~ #visible>#first
{
display:inline-block;
}
#visible :hover >#first
{
display:inline-block;
}
#visible :hover + #first
{
display: inline-block;
}
It would be great if anyone can help me. I know it can be done using JavaScript but I want to execute this using CSS3
#visible, #first{ float: left;} /* use stylesheets! not inline styles */
#first{ display:none; } /* hidden initially... */
#visible:hover + #first{ display:block; } /* show on #visible hover */
<div id="visible"> HOVER ME!</div>
<div id="first"><span class="bob">Flatkit</span></div>
#visible, #first{ float: left;} /* use stylesheets! not inline styles */
#first{display:none;}
#visible:hover + #first{ display:block; }
.one{
width:100px;
height:100px;
text-align:center;
border:1px solid red;
}
.two{
width:100px;
height:100px;
text-align:center;
border:1px solid blue;
margin-left:5px;
}
<div id="visible" class="one"> Visible </div>
<div id="first" class="two"><span class="bob">Next Div</span></div>
<html>
<head>
<style>
#first
{
display:none;
}
#visible:hover ~ #first
{
display:inline-block;
}
</style>
</head>
<body>
<div id="visible" style="float:left;">
Hello
</div>
<div id="first" style="float:left;">
<span class="bob">Flatkit</span>
</div>
</body>
</html>
I am trying to make a website for my niece, kind of like a homepage for her. I have a little experience coding and I got stuck positioning an image. I don't know whats wrong with it.
Here's my HTML code:
<html>
<head>
<title>MWM</title>
<h1>Welcome to ---- HomePage!</h1>
<link rel="stylesheet" type="text/css" href="C:\Style.css">
<script language="javascript">
function MouseRollover(MyImage)
{MyImage.src = "C:\N2.png";}
function MouseOut(MyImage)
{MyImage.src = "C:\N1.png";}
function MouseRollover2(MyImage)
{MyImage.src = "C:\C2.png";}
function MouseOut2(MyImage)
{MyImage.src = "C:\C1.png";}
function MouseRollover3(MyImage)
{MyImage.src = "C:\Y2.png";}
function MouseOut3(MyImage)
{MyImage.src = "C:\Y1.png";}
function MouseRollover4(MyImage)
{MyImage.src = "C:\H2.png";}
function MouseOut4(MyImage)
{MyImage.src = "C:\H1.png";}
</script>
</head>
<body>
<!--Cartoons-->
<a class="Dec" href="C:\Cartoons.html">
<img class="border size" src="C:\C1.png" onMouseOver="MouseRollover2(this)" onMouseOut="MouseOut2(this)">
</a>
<!--Google-->
<a Class="Dec" href="http://www.Google.com">
<img id="N" class="border size" src="C:\N1.png" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<!---->
</body>
</html>
and here's my CSS:
body {Background-color: lime;}
h1 {text-align: center;Color: Black;}
/**/
.Border {border-style: inset;border-width: 10px;border-bottom-color: #454545;border-right-color: #454545; border-top-color: #DEDEDE; border-left-color: #DEDEDE;}
.Dec {text-decoration: None;}
.Size {height: 57px;width: 227px;}
.SY {height:77px;Width: 227px}
/*
Postion Equation: (Height+20Border+IconLeft+20Image growth)="Height"
(Width+20Border+IconLeft+20Image growth)="Width"
*/
#C {position:absolute;}
#N {position:absolute; TOP:163px; LEFT:275px;}
#Y {position:absolute; TOP:260px; LEFT:542px;}
#H {position:absolute; TOP:163px; RIGHT:275px;}
/**/
img:link {}
img:visited {}
img:hover {height: 77px;width: 247px;}
img:hover.SY {height: 97px;Width: 247px;}
/**/
Even though I did everything the same I still cant make the "Facebook Link" work!
I made every other option works perfectly fine except that one. I tried using Margin-Top:163px; and Margin-Right:275px; in CSS but that just moved everything down... I want it to change picture when you hover over it and also for it to grow in size...
You dont need to use JavaScript at all.
Of what I understand, you only want the picture to change on hover. So this is what you'll need to do.
HTML
CSS
#fbimage{
background-image:url('fbimage.png');
}
#fbimage:hover{
background-image:url('fbhoverimage.png');
}
You forget a > after the Youtube link:
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a>
<!-- Right up ^ here-->
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<html>
<head>
<title>MWM</title>
<style>
.container{
background-color: lime;
width:100%;
height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:absolute;
}
h1 {text-align: center;color: black;font-size:3em;}
ul{
list-style-type:none;
}
a{
display:block;
border-style: inset;
border-width: 10px;
border-bottom-color: #454545;
border-right-color: #454545;
border-top-color: #DEDEDE;
border-left-color: #DEDEDE;
height:100px;
width:200px;
position:absolute;
background:red;
float:left;
text-align: center;
vertical-align: middle;
color:white;
font-size:2em;
line-height:100px;
}
a.cartoon{
top:0;
left:0;
background:url(C:\C1.png) blue;
}
a.cartoon:hover{
background:url(C:\C2.png)aqua;
}
a.google{
top:200;
left:200;
background:url(C:\G1.png) yellow;
}
a.google:hover{
background:url(C:\G2.png)gold;
}
a.youtube{
top:400;
left:400;
background:url(C:\Y1.png) red;
}
a.youtube:hover{
background:url(C:\Y2.png)darkred;
}
a.facebook{
top:600;
left:600;
background:url(C:\F1.png) green;
}
a.facebook:hover{
background:url(C:\F2.png)lawngreen;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to ---- HomePage!</h1>
Cartoon
Google
Youtube
Facebook
</div>
</body>
</html>
I have a little problem with CSS hover...I have two divs in the same class but I wanna hover only one.
I already tried but it is not working and if it's working it changes for each color.
<div class="container iphone">
<!-- First box -->
<div class="span3 iphone-box-left">
======> <div class="quoteLeft"> <====== :hover
<blockquote>
<p>
description here
</p>
</blockquote>
<p class="credit">
johny
</p>
</div>
</div>
<!-- First box end -->
<!-- Second box -->
<div class="span6">
<img src="images/iphone.png">
<!-- Start Logo -->
<div class="logo-second">
<h3>
==============================================================
So when i hover on qouteLeft i wanna change the color on icon
this icon i also have in logo
====> <i class="icon-cloud icon-large"></i> <=================
creative
</h3>
</div>
<!-- Logo end -->
</div>
<!-- Second box end -->
CSS
.iphone {
position: relative; margin:50px auto; background:url(../images/11.png);
}
.quoteLeft {
position:relative;
top:40px;
padding:15px 25px 20px;
margin:20px auto;
font:italic 26px/1.4 Georgia, serif;
color:#fff;
background:rgba(34, 34, 34, .5);
}
.quoteLeft:after {
content:"";
position:absolute;
top:100%;
left:100%;
margin-top:-4px;
background:url(../images/box-line.png) no-repeat;
width:150px; height:165px;
}
.quoteRight {
position:relative;
top:150px;
padding:15px 25px 20px;
margin:20px auto;
font:italic 26px/1.4 Georgia, serif;
color:#fff;
background:rgba(34, 34, 34, .5);
}
.quoteRight:after {
content:"";
position:absolute;
top:100%;
right:80%;
margin-top:-4px;
background:url(../images/box-line-2.png) no-repeat;
width:300px; height:165px;
}
.credit {
margin:1em 0 0;
font:14px/1.2 Arial, sans-serif;
}
.credit:before {
content:"— ";
}
blockquote, p {padding:0; margin:0;}
.logo-second { position:absolute; margin-top:-20%; margin-left:11%;}
.logo-second h3 { font-size:56px;}
.quoteLeft:hover {And....}
I prefer any ideas css or jquery
Thanks
I think this is what you are looking for:
HTML
<div class="main">
<div class="first">First</div>
<div class="second">Second</div>
</div>
CSS
.main .first:hover ~ .second {
background-color: #f00;
}
I also made a jsFiddle
I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.
First of all, I would like you to check my website: http://mmking9999.com
After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="http://mmking9999.com/css/style.css" />
</head>
<body>
<!--Site logo. Clicking on it will redirect to this page.-->
<div class="logo">
<img src="http://mmking9999.com/Images/SiteLogo.png" />
</div>
<!-- Menu window goes here. The text are images that link to other pages.-->
<div class="menu">
<img src="http://mmking9999.com/Images/MenuWindow.png" />
</div>
<div class="portfolio_url">
<img src="http://mmking9999.com/Images/portfoliourl.png" />
</div>
<div class="blog_url">
<img src="http://mmking9999.com/Images/blogurl.png" />
</div>
<div class="random_url">
<img src="http://mmking9999.com/Images/randomurl.png" />
</div>
<div class="email">
<img src="http://mmking9999.com/Images/emailicon.png" />
</div>
<div class="linkedin">
<img src="http://mmking9999.com/Images/linkedinicon.png" />
</div>
<div class="twitter">
<img src="http://mmking9999.com/Images/twittericon.png" />
</div>
<div class="window"><br><br><p>Welcome to my website! My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future. I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play. Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!</p></div>
</body>
</html>
And here is the CSS I'm using:
/*The code for the body sets the default settings for all pages */
body
{
background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}
/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}
/* Main window. Used to display text and images */
img
{
margin: 2px;
height: auto;
width: auto;
float: left;
}
h1
{
color:red;
text-align:center;
font-family:calibri;
}
p
{
/* font */
color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;
text-align:left; width:700px; margin-left:200px;
}
/* Main window. All info is displayed in here */
div.window
{
background-image:url('http://mmking9999.com/Images/IframeWindow.png');
background-repeat:no-repeat;
position:relative;
width:60%;
height:70%;
top:80px;
left:500px;
/*text*/
/*color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;*/
}
/* Menu */
div.menu
{
position:relative;
width:40%;
height:10%;
}
/*Site logo */
div.logo
{
position:relative;
width:40%;
height:5%;
left:500px;
}
/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
position:absolute;
left:20px;
}
/* In case I need another row of images */
div.image2
{
position:relative;
left:-150px;
width:90%;
height:90%;
}
/*Menu urls*/
div.portfolio_url
{
position:relative;
left:-175px;
top:30px;
}
div.blog_url
{
position:relative;
left:-305px;
top:90px;
}
div.random_url
{
position:relative;
left:-445px;
top:150px;
}
div.email
{
position:relative;
top:250px;
left:-600px;
}
div.linkedin
{
position:relative;
top:250px;
left:-580px;
}
div.twitter
{
position:relative;
top:250px;
left:-560px;
}
/*iframe
{
position:relative;
top:80px;
left:280px;
width:60%; height:70%;
}*/
Thanks for any advice you can provide.
http://d.pr/i/OhIF
Try using position:absolute rather than relative on your divs.