Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,149,976 members, 7,806,854 topics. Date: Wednesday, 24 April 2024 at 04:21 AM

I Need Help On CSS Styling. - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / I Need Help On CSS Styling. (1025 Views)

Checkout This Amazing Jquery Plugin: Anaxi For Styling Links. / Custom Scrollbar Styling / Custom Scrollbar Styling (2) (3) (4)

(1) (Reply) (Go Down)

I Need Help On CSS Styling. by concord129(m): 8:07pm On Feb 10, 2018
Please webmasters, I just begin learning html/css this week and I decided to put the knowledge I had gained to use, so I decided to design the below webpage, but I am finding it difficult to do some styling accurately, Below is what I have in mind to achieve, I did the illustration in photoshop and also attached is the result I'm getting from my code.
So I want the navigation bar to join with the main header which carried the logo, also the footer (copyright bla bla...), I want it to be at the bottom without showing the main background image.
Thanks.
Cc:
Dhtml,
slyr0x
Adewasco2k
and other webmasters, I don't know there names, I'm new in this section.

Re: I Need Help On CSS Styling. by Donald3d(m): 8:11pm On Feb 10, 2018
Share your code na
Re: I Need Help On CSS Styling. by concord129(m): 8:24pm On Feb 10, 2018
Here is the style:


html{
background: url('background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
color: #fff;
font-family: arial 'sans-serif';
font-size: 16px;
line-height: 1.6em;
}
.container{
width: 100%
margin: auto;
overflow: hidden;
}
#mainheader{
font-family: verdana;
text-align: left;
font-size: 20px;
background: coral;
color: #000;
}
#mainheader1{
font-family: verdana;
text-align: left;
font-size: 15px;
background: coral;
color: #000;
margin-top:0px;
}
#navbar{
color:#000;
}
#mainheader1 ul{
border: 1px solid black;
text-align: center;
list-style:none;
}
#mainheader1 li{
text-align: center;
display: inline;
}
#mainheader1 a{
color:#000;
text-decoration: none;
font-size: 18px;
padding-right: 25px;
}
#mainheader1 a:hover{
color: #fff;
}
#advert{
text-align: center;
font-family: verdana; sans-serif;
font-size: 35px;
text-align: right;
margin-top: 10px;
padding-top: 60px;
padding-right: 60px;
}
.learn {
background-color: #0033ff;
color: #ffffff;
text-align: right;
font-size: 18px;
color: #ffffff;
padding:5px 8px;
text-decoration: none;
}
.learn:hover{
background-color: #333333;
color: #ffffff;
}
#sociallink{
height: 10px;
width: 8px;
display: inline;
}
#sociallink a{
}
#mainfooter {
background-color: #ddd;
color: #000;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 30px;
margin-bottom: 0px;
text-align: center;
font-size: 20px;
}
Re: I Need Help On CSS Styling. by concord129(m): 8:25pm On Feb 10, 2018
The html:



<!Doctype html>
<html>
<head>
<title>Concordsite</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<header id="mainheader">
<div class="container">
<img src="reallogo.png" alt="concord"/>
</header>
<nav id="mainheader1">
<ul>
<li><a href="concordsite.html">Home</a></li>
<li><a href="concordsite.html">About me</a></li>
<li><a href="concordsite.html">Skills</a></li>
<li><a href="concordsite.html">Portfolio</a></li>
<li><a href="concordsite.html">Blog</a></li>
<li><a href="concordsite.html">Get started</a></li>
<li><a href="concordsite.html">Contact Us</a></li>
</ul>
</nav>
</div>
<section id="advert">
<h1>Hello,</h1>
<h2>I'm Concord</h2>
<h1>GEEK DEVELOPER</h1>
<br/><a class="learn" href="aboutme.html">Learn more</a>
</section>
<section id="sociallink">
<a href="www.facebook.com/azeez.lateef.37"><img src="Facebook.png" alt="facebook"/></a>
<a href="www.twitter.com"><img src="linkedin.png" alt="twitter"/></a>
<a href="www.linkedin.com"><img src="23931.png" alt="linkedin"/></a>
</section>
<footer id="mainfooter">
<p>Copyright, &copy; 2018, Concord. All rights reserved.</p>
</footer>
</body>
</html>
Re: I Need Help On CSS Styling. by 350cl(f): 2:30pm On Feb 20, 2018
Remove your closing header i.e /header and close it after the nav. Create separate divs for the logo and navigation but the two should be inside one container. Ensure you float the logo and nav div left.
Re: I Need Help On CSS Styling. by exhibit7432(m): 11:18am On Feb 11, 2020
[quote author=concord129 post=64955344][/quote]

Give your header image a class of say “logo”

Then in your css Give it

Display: inline-block

Also similar for the a tags.


And for the footer problem. Just add this to your html’s css

Html {
Margin-bottom : 0
}

This should solve your issues
Re: I Need Help On CSS Styling. by GabriellePeake: 9:05pm On Jun 14, 2021
You have a good website design; the final version looks great. Unfortunately, I am also not an expert, and I study web design as a hobby. For styling questions, you can read on this website https://technodir.co.uk/. I often find helpful articles here. In addition, I am interested in where you study, because I also think to go to web design courses to get a job in this specialty. But for now, as a beginner, it's too early for me to talk about it. I wish you success too. Share the result of how your site will turn out!

(1) (Reply)

Webmasters,any Idea ?? / How Possible Is It To Rank For This Keyword? / 2019 Best Google Adsense Alternatives For Publishers

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 32
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.