Another CSS help

Status
Not open for further replies.
T

TrueJewix

Member
Aug 9, 2012
332
21
Okay, I want to move the <a's> (lists) to the right side but how do I do that? I've tried doing float;right

You must be registered for see links


Thanks, Bye!
 
Sort by date Sort by votes
T

TrueJewix

Member
Aug 9, 2012
332
21
RastaLulz said:
This should do the trick.
You must be registered for see links
Click to expand...
Which code should I take?
body, html {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 10px;
}
.red-bar {
background: red;
padding: 10px;
}
.float-right {
float: right;
}
.reset {
clear: both;
}
 
Upvote 0 Downvote
RastaLulz

RastaLulz

fight teh power
Staff member
May 3, 2010
3,935
3,936
TrueJewix said:
Which code should I take?
body, html {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 10px;
}
.red-bar {
background: red;
padding: 10px;
}
.float-right {
float: right;
}
.reset {
clear: both;
}
Click to expand...
You'd want the .float-right and .reset class. You'd then wrap your links in the .float-right class, then you'd put the .reset class in a div below it, as seen in the CodePen.
 
Upvote 0 Downvote
T

TrueJewix

Member
Aug 9, 2012
332
21
Sysode said:
To the parent element add this:

text-align:right;
Click to expand...
Tried that.

RastaLulz said:
You'd want the .float-right and .reset class. You'd then wrap your links in the .float-right class, then you'd put the .reset class in a div below it, as seen in the CodePen.
Click to expand...
This is the part I get confused,
Here is my CSS code & HTML
body, html {
margin: 0;
padding: 0;
}

.Test {
background: #D3D3D3;
padding: 15px;
box-shadow: 0px 1px 2px #838383;

}

.Test a {
color: #000000;
padding-left: 13px;
text-decoration: none;
text-align:right;
}

.Test a:hover {
color: white;
}

This is my HTML

<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div class="Test">
<a href="">Home</a>
<a href="">Team</a>
<a href="">Radio</a>
<a href="">Helpful</a>
<a href="">Guides</a>
<a href="">News</a>
<a href="">Report</a>
</div>
</body>
</html>
 
Upvote 0 Downvote
RastaLulz

RastaLulz

fight teh power
Staff member
May 3, 2010
3,935
3,936
TrueJewix said:
Tried that.


This is the part I get confused,
Here is my CSS code & HTML
body, html {
margin: 0;
padding: 0;
}

.Test {
background: #D3D3D3;
padding: 15px;
box-shadow: 0px 1px 2px #838383;

}

.Test a {
color: #000000;
padding-left: 13px;
text-decoration: none;
text-align:right;
}

.Test a:hover {
color: white;
}

This is my HTML

<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div class="Test">
<a href="">Home</a>
<a href="">Team</a>
<a href="">Radio</a>
<a href="">Helpful</a>
<a href="">Guides</a>
<a href="">News</a>
<a href="">Report</a>
</div>
</body>
</html>
Click to expand...
You must be registered for see links
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Wrap your navigation inside ul tags and use li for listing the links. Look up "ul and li nav" or something in google - would explain but it's hard on iPad.
 
Upvote 0 Downvote
Status
Not open for further replies.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top