PrivateAlps.net - Offshore Cloud Services | VPS/RDP/VPN - Dedicated Servers - Webhosting - TOR Services - Auto Deploy
ADULTSLAYER.STORE 💎 #1 PORN SHOP | 700+ Hot Products: Brazzers, Teamskeet, Pornhub, NaughtyAmerica, Many More! | 💸 Secure PayPal & Card Payments | Satisfaction Guaranteed! 🔥
Frontend Development

Need help with css

Submitted by Carpesir, , Thread ID: 14177

Thread Closed
10-12-2015, 02:12 PM
This post was last modified: 10-12-2015, 02:22 PM by Carpesir
#1
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>

RE: Need help with css

#2
How about code tags?

RE: Need help with css

OP
#3
10-12-2015, 02:18 PM
Wrote: How about code tags?

Added now, sorry

RE: Need help with css

This post was last modified: 11-12-2015, 12:38 AM by Never
#4
that css is so messy oh my god

Also:
display:block on #boxlink

Should be removed.
Works then.
nvr

RE: Need help with css

OP
#5
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 (:

RE: Need help with css

This post was last modified: 11-12-2015, 11:53 AM by Never
#6
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

RE: Need help with css

OP
#7
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

RE: Need help with css

#8
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

RE: Need help with css

#9
how to learn css! ! can somene tell me

RE: Need help with css

#10
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/
[Image: XhhKTdF.png]

Users browsing this thread: 7 Guest(s)