Need help with css

by Carpesir - 10-12-2015, 02:12 PM
3,4-Methylendioxy-N-methylamphetamin
Prime
Posts:
2,039
Joined:
Oct 2015
Likes:
53
Credits:
105
Reputation:
76
2 Years of Service
#1
OP
Posted: 10-12-2015, 02:12 PM (This post was last modified: 10-12-2015, 02:22 PM by Carpesir.)
Hi,

I am currenlty working on getting the skelet for my website done. Now I am facing a problem. 
I have a line that says 

    "While you're here, make sure to visit my profile :^)"

on my page. Right next to it, I want to have a link to my NBB profile in a green box. 

My current code for it: 



Code:
#boxlink {display:block;font-weight:700;color:white;background-color:#98bf21;width:100px;text-align:center;padding:4px;text-decoration:none}

#paragraph2 {color:white;font-family:"Lucida Console", Times, Serif;text-align:left;}

<p id="paragraph2">While you're here, make sure to visit my profile :^)    <a id="boxlink" href="nulledbb.com/profile/3190">Carpesir on NulledBB</a></p>





But for some reason the text box with the link appears down under what <p id="para2">

How to fix ?

Full code:

Code:
<!DOCTYPE html>
<html>
<title>Carpesir - Enter the rabbit hole</title>
<head>
<style>
body {background:black;}

ul {display:block;color:white;background-color:#98bf21;width:170px;padding:4px;font-family:"Lucida Console", Times, Serif;text-align:left;list-style-type:none;margin:0;}
a:link {color:black;text-decoration:none;font-family:"Lucida Console", Times, Serif;}
a:visited {color:white;text-decoration:none;font-family:"Lucida Console", Times, Serif;}
a:hover {background-color:#7A991A;color:yellow;text-decoration:underline;font-family:"Lucida Console", Times, Serif;}
a:active {background-color:#7A991A;color:blue;text-decoration:none;font-family:"Lucida Console", Times, Serif;}

#boxlink {display:block;font-weight:700;color:white;background-color:#98bf21;width:100px;text-align:center;padding:4px;text-decoration:none}
#anavbar {color:white;}
#aokiforsomereason {color:#7A991A}

h1 {color:red;text-align:center;}

#paragraph1 {color:blue;font-family:"Lucida Console", Times, Serif;text-align:center;}
#h2 {color:yellow;font-family:"Lucida Console", Times, Serif;text-align:left;}
#paragraph2 {color:white;font-family:"Lucida Console", Times, Serif;text-align:left;}
</style>
</head>
<body>
<h1>Welcome to Carpesir's site. As you see, this site is WorkInProgress.</h1>
<p id="paragraph1">I'
m Carpesir from NulledBB. If you're here, I'm guessing you already know me.</p>
<p id="paragraph2">While you're here, make sure to visit my profile :^)    <a id="boxlink" href="nulledbb.com/profile/3190">Carpesir on NulledBB</a></p>
<h2 id="h2">Please take a look at the navigation bar:</h2>
<ul>
<li><a id="anavbar" href="mydomain.com/index.html">Home</a></li>
<li><a id="anavbar" href="nulledbb.com">NulledBB</a></li>
<li><a id="anavbar" href="nulledbb.com">Carpesir@NBB</a></li>
<li><a id="aokiforsomereason" href="nulledbb.com">Aoki for some reason</a></li>
</ul>
</ul>
</body>
</html>
selling fadeds nudes
Posts:
5,557
Joined:
Jan 2015
Likes:
1,513
Credits:
21,473
Reputation:
221
2 Years of Service
#2
Posted: 10-12-2015, 02:18 PM
How about code tags?
Send me a message for help. (Read the help docs first)
Steam Wishlist - Anime Watchlist
3,4-Methylendioxy-N-methylamphetamin
Prime
Posts:
2,039
Joined:
Oct 2015
Likes:
53
Credits:
105
Reputation:
76
2 Years of Service
#3
OP
Posted: 10-12-2015, 02:21 PM
(10-12-2015, 02:18 PM)去他媽的自己 Wrote: How about code tags?

Added now, sorry
­
Posts:
1,246
Joined:
Jul 2015
Likes:
41
Credits:
1,035
Reputation:
30
2 Years of Service
#4
Posted: 11-12-2015, 12:35 AM (This post was last modified: 11-12-2015, 12:38 AM by nvr.)
that css is so messy oh my god

Also:
display:block on #boxlink

Should be removed.
Works then.
nvr
3,4-Methylendioxy-N-methylamphetamin
Prime
Posts:
2,039
Joined:
Oct 2015
Likes:
53
Credits:
105
Reputation:
76
2 Years of Service
#5
OP
Posted: 11-12-2015, 09:59 AM
(11-12-2015, 12:35 AM)Never Wrote: that css is so messy oh my god

Also:
display:block on #boxlink

Should be removed.
Works then.

I am pretty new to HTML/CSS, any tips especially for this code to make it less messy?

Also, thanks a lot! It really fixed it (:
­
Posts:
1,246
Joined:
Jul 2015
Likes:
41
Credits:
1,035
Reputation:
30
2 Years of Service
#6
Posted: 11-12-2015, 11:53 AM (This post was last modified: 11-12-2015, 11:53 AM by nvr.)
(11-12-2015, 09:59 AM)Carpesir Wrote:
(11-12-2015, 12:35 AM)Never Wrote: that css is so messy oh my god

Also:
display:block on #boxlink

Should be removed.
Works then.

I am pretty new to HTML/CSS, any tips especially for this code to make it less messy?

Also, thanks a lot! It really fixed it (:

I guess it comes down to preference, I learned to write it like this:
Code:
html element {
background color: #fff;
border: 1 px solid black;
etc..
}

Next thing {
....
}
Is alot less messy if you ask me.
nvr
3,4-Methylendioxy-N-methylamphetamin
Prime
Posts:
2,039
Joined:
Oct 2015
Likes:
53
Credits:
105
Reputation:
76
2 Years of Service
#7
OP
Posted: 11-12-2015, 12:03 PM
(11-12-2015, 11:53 AM)Never Wrote:
(11-12-2015, 09:59 AM)Carpesir Wrote:
(11-12-2015, 12:35 AM)Never Wrote: that css is so messy oh my god

Also:
display:block on #boxlink

Should be removed.
Works then.

I am pretty new to HTML/CSS, any tips especially for this code to make it less messy?

Also, thanks a lot! It really fixed it (:

I guess it comes down to preference, I learned to write it like this:
Code:
html element {
background color: #fff;
border: 1 px solid black;
etc..
}

Next thing {
....
}
Is alot less messy if you ask me.

True it's less messy, but it makes the code really long :c
­
Posts:
1,246
Joined:
Jul 2015
Likes:
41
Credits:
1,035
Reputation:
30
2 Years of Service
#8
Posted: 11-12-2015, 03:02 PM
(11-12-2015, 12:03 PM)Carpesir Wrote:
(11-12-2015, 11:53 AM)Never Wrote:
(11-12-2015, 09:59 AM)Carpesir Wrote:
(11-12-2015, 12:35 AM)Never Wrote: that css is so messy oh my god

Also:
display:block on #boxlink

Should be removed.
Works then.

I am pretty new to HTML/CSS, any tips especially for this code to make it less messy?

Also, thanks a lot! It really fixed it (:

I guess it comes down to preference, I learned to write it like this:
Code:
html element {
background color: #fff;
border: 1 px solid black;
etc..
}

Next thing {
....
}
Is alot less messy if you ask me.

True it's less messy, but it makes the code really long :c

Readable > short
nvr
Newbie
Posts:
19
Joined:
Dec 2015
Likes:
0
Credits:
0
Reputation:
0
1 Year of Service
#9
Posted: 18-12-2015, 05:28 PM
how to learn css! ! can somene tell me
Offline
Posts:
933
Joined:
Jan 2015
Likes:
81
Credits:
913
Reputation:
57
2 Years of Service
#10
Posted: 18-12-2015, 05:43 PM
P tags are block element by default... you need inline block there! Now you can put that box float:right; next to paragraph

https://jsfiddle.net/5jkdxjyx/
Sent from my Nokia 3310
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)