/    Sign up×
Community /Pin to ProfileBookmark

Website Idea?

So I’m just messing around making a website for fun, this will never go public, anyways I have a problem trying to move this black banner up a little towards the logo, when I add the “top:” it doesn’t seem to move, also does anyone have any ideas how I can spice it up a little to make it look nicer, any tips will help me as I’m newish to coding ?

[CODE]
<!DOCTYPE html>
<html lang=”en”>
<head>
<title> Website </title>
<link rel=”stylesheet” href=”style.css”>
<meta charset=”utf-8″/>
<meta name=’viewport’ content=’width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no’ />
</head>

<body>

<div id=”header”>
<img id=”logo” src=”logo.png”>
</div>
<ul>
<li id=”home”> HOME
</ul>
</li>

<ul>
<li id=”about_us”> ABOUT US
</ul>
</li>

<ul>
<li id=”contact”> CONTACT
</ul>
</li>

<ul>
<li id=”support”> SUPPORT
</ul>
</li>

<div class=”page-banner”>
</div>
</body>
</html>
[/CODE]

to post a comment
CSSHTML

5 Comments(s)

Copy linkTweet thisAlerts:
@Dan1999authorJun 14.2018 — Css is here

[CODE]
* { /* Reset browser defaults */
margin: 0;
padding: 0;
border: 0;
}

html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}

body {
background-color: white;
}


img#logo {
margin-left: 39.42vw;
margin-top: 1vw;
width: 20vw;
height: 15vw;
display: block;
position: relative;
vertical-align: middle;





}
img#banner {

width: 95vw;
height: 40vw;
position: relative;
top: -3vw;
left: 2vw;



}
ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 0px 15px 0;
list-style: none;
text-shadow: 0 -2px 0 #000;
}
ul li {
top: 0vw;
left: 5vw;
font-size: 13pt;
font-weight: bold;
display: inline-block;
height: 20px;
width: 390px;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 110px;
display: none;
visibility: hidden;
}
ul li ul li {
background: #555;
display: block;
color: white;
text-shadow: 0 -2px 0 #000;
}
ul li ul li:hover {
background: #666;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
li#home {

top: -10vw;
left: -2vw;
height: 2.2vw;
width: 22vw;
color: black;
z-index: 4;
font-size: 2.2vw;
margin: 0 auto;

}
li#about_us {

top: -10vw;
left: -7vw;
height: 2.2vw;
width: 22vw;
color: black;
font-size: 2.2vw;
margin: 0 auto;


}

li#contact {

top: -10vw;
left: 8vw;
height: 2.2vw;
width: 22vw;
color: black;
font-size: 2.2vw;
margin: 0 auto;


}

li#support {

top: -10vw;
left: 5vw;
height: 2.2vw;
width: 22vw;
color: black;
font-size: 2.2vw;
margin: 0 auto;



}

.page-banner {

padding: 25px 0px 30px 0px;
background-color: #2f2f2f;
width: 100%;
height: 304px;
margin: 0 auto;




}
[/CODE]
Copy linkTweet thisAlerts:
@Dan1999authorJun 14.2018 — Anyone?
Copy linkTweet thisAlerts:
@NogDogJun 14.2018 — @Dan1999#1592962

Maybe create a "pen" in codepen to let people see it and try things without having to do it all locally on their computer? https://codepen.io/pen/
Copy linkTweet thisAlerts:
@Dan1999authorJun 14.2018 — Takes about 2 mins to do plus I can't add any photo's there?
Copy linkTweet thisAlerts:
@NogDogJun 14.2018 — > @Dan1999#1592964 Takes about 2 mins to do plus I can't add any photo's there?

Hmm...probably have to host the images somewhere on the web an reference them with full URLs? You'd need to do that anyway for anyone here to work with your code locally (or upload it here and make them download it?).

I'm mainly a server-side guy -- I just know I've seen people using codepen to get client-side input from others.
×

Success!

Help @Dan1999 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...