So I'm making a site for a school project and I want to know how I can remove the whitespace on the sides of the menu when hovering over the first and last links. Here's the fiddle.
Sorry if my code is not that great, I'm a beginner...
Also I notice that my menu is staying still but everything else is going crazy with positioning when in different resolutions. How do I get it so everything stays in relatively the same position in different resolutions?
Thanks.
Oh and here's the html:
<body>
<h1 class='titles'>Phosphorus 4 Dummies</h1>
<nav>
<ul class='menu'>
<li id='home'><a href='#'>Home</li></a>
<li id='phys'><a href='#'>Phys. Prop.</li></a>
<li id='chem'><a href='#'>Chem. Prop.</li></a>
<li id='facts'><a href='#'>Fun Facts</li></a>
</ul>
</nav>
<p class='info'>Phosphorus is a very reactive element in the Nitrogen Group. It has 15 protons, 16 neutrons, and 5 valence electrons. It is a non-metal so it can be found on the right side of the zig-zag along with other non-metals. Its symbol is a simple P.</p>
<img src='http://images-of-elements.com/red-phosphorus.jpg' id='redPhosphorus' height=300px />
And the css:
body {
margin: 300px;
padding: 0px;
}
.titles {
font-size: 72px;
font-family: Helvetica, sans-serif;
text-align: center;
position: relative;
bottom: 100px;
}
.menu {
position: relative;
width: 760px;
bottom: 330px;
margin: auto;
margin-bottom: 0px;
text-align: center;
border: 2px solid black;
border-radius: 5px;
padding: 0;
font-size: 0;
}
.menu li {
font-size: 36px;
font-family: Helvetica, sans-serif;
display: inline-block;
position: relative;
top: 0;
float: none;
}
.menu li a {
text-decoration: none;
color: black;
padding-right: 11px;
padding-left: 11px;
padding-top: 0px;
padding-bottom: 1px;
border-right: 2px solid black;
margin: 0;
}
.menu li:nth-child(4) a {
border: none;
}
.menu li a:hover {
background-color: orange;
}
There is whitespace because your menu is set at a width: 760px, but your menu list does not fit all the way across, so there is white space.
Also, to make it responsive, you need to use media queries.
UPDATE:
If you know the expected results [height, width, etc] you have to give your <nav> the set width, and the <ul> to a larger width, but add overflow: hidden and height: 41px
Here is a fiddle to experiment with. You did not have an ideal layout, but I've worked with what you gave. If anyone finds a better solution I would be more than happy to observe.
i took a look at your code, you nested the elements wrongly, make sure to close the a tag first
<li><a></li></a>
should be:
<li><a></a></li>
Related
I have a little problem, there is a little problem on my menu, there is a little space between the ul border and the li background, here's my code:
Menu code:
.menu_base {
margin-left: auto;
margin-right: auto;
margin-top: 0;
list-style-type: none;
padding: 0;
overflow: hidden;
width: 75%;
border: 3px solid;
border-top: 0px solid;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color: #ff6eff;
}
.button {
float: left;
}
.button a {
padding: 15px 15px;
display: block;
text-align: center;
text-decoration: none;
color: #ff6eff;
font-family: sans-serif;
}
.button a:hover {
background-color: #ff6eff;
color: white;
}
<ul class="menu_base">
<li class="button">Accueil</li>
<li class="button" style="float: right">Inscription</li>
<li class="button" style="float: right">Connexion</li>
</ul>
Excepted result: (From Firefox)
https://i.stack.imgur.com/e62BM.png
Actual result: (From Chrome)
https://i.stack.imgur.com/x3wYU.png
Did you add the normalize CSS to the top op your CSS file?
All browsers sort of add their own style which can cause problems when adding CSS to your site. By normalizing the CSS you get the same margin, padding etc for all browsers. You can use Eric Meyers normalize CSS. Just copy the CSS from the link below and add it to the top of your CSS file.
You can find it here: https://meyerweb.com/eric/tools/css/reset/
A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:https://codetheworld.000webhostapp.com/. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:
#first {
margin-top: 500px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: -1150px;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
You positioned your element outside of the viewport, so it can't be clicked.
Remove the margin-top & top positioning and everything will work:
#first {
background: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.
You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.
#Alessi 42 commented the correct solution, however Dekel was the one who posted it.
I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /
So learning from the experience I would say:
First test with and without CSS, and once you have determined that without CSS the element appears.
Start introducing CSS selectors and add/removing the different attributes
Once you find the attribute that is affected proceed to play with the values.
For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:
Insted of this: href="tutorial.html" I would do href="./tutorial.html"
See my website here http://1-dot-speaklikewater.appspot.com
and the code
<img style="vertical-align: middle;" src="speaklikewaterlogo.png" />
<a href='index.jsp' class='linkButton' >Home</a>
.linkButton:link, .linkButton:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.linkButton:hover, .linkButton:active {
background-color: green;
color: white;
}
This's ok, but the image quality is not good because when users magnify the page the image got blurred.
No, I don't want to use image as logo. I want to use Text like a logo.
Can you do the Exactly same thing like the above website but this time we use Text instead of image for logo. So it should look like this, but the middle of "Home" and the middle of the text logo should be on the same line?
SpeakLike
Water.com Home ...
Can we achieve that?
Can we achieve that?
Sure here is an example how to do this;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
line-height: 44px;
vertical-align: middle;
}
li a {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: block;
line-height: 1;
font-weight: bold;
}
.logo-box {
margin-right: 10px;
}
.logo-line {
display: block;
line-height: 22px;
color: #D42424;
font-weight: bold;
}
<ul>
<li>
<div class="logo-box">
<span class="logo-line">SpeakLike</span>
<span class="logo-line">Water.com</span>
</div>
</li>
<li>Home</li>
<li>Online Users</li>
<li>Method</li>
<li>Lesson</li>
<li>Conversation</li>
<li>Register</li>
<li>Login</li>
</ul>
I'm going to assume you know how to display text and style it, if you need me to explain, just say so.
This leaves the problem of centering the logo with "Home". You have two options to do this
1) Margin
.logo {
margin-top: -20px;
}
This will shift the .logo up 20px. Adjust margin as needed to properly center.
2) Position
.logo {
position: relative;
top: -20px
}
This does the same thing, but uses positioning instead of margins. This option is better in terms of having less hacky CSS.
Yes, you can use an <h1> element and style the text accordingly (you can even use web fonts, if you wish). Something like:
h1 {
color: #cc0000;
font-family: "Times New Roman", serif;
width: 100px;
word-wrap: break-word;
font-size: 20px;
float: left;
}
ul {
list-style-type: none;
position: relative;
top: 30px;
}
ul li {
float: left;
margin: 0 10px;
}
<h1>SpeakLikeWater.com</h1>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
My AIM: is to make a navigation bar go across the whole screen, with a greyish colour (#839496). And have each link/button to have a border to the left and the right of it. Just like the navigation bar on:
http://www.theberrics.com/dailyops
However,
My Problem is: the link/button is only going across as far as is goes. I want each button to go across with the width of 150px (which works fine). BUT also have the grey bar continue through the whole screen horizontally (which isnt working and just displays nothing).
Here is my css:
nav {
background-color: #839496;
padding: 0.02px 0;
margin-bottom: 10px;
}
nav ul {
width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
position: relative;
left:10%;
margin: 0;
padding-left: 100px;
}
nav li {
float: left;
}
nav li a{
display: block;
width: 150px;
background-color: #839496;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
border-right: 1px solid;
border-left: 1px solid;
}
nav a:hover {
background-color: white;
color: #000;
text-decoration: underline;
}
And here is my html:
<nav>
<ul>
<li>Home<li>
<li>Top 10</li>
<li>Skaters</li>
<li>Submit</li>
</ul>
</nav>
Also: i dont want each button to be 25% of the page. Just 150px wide.
Sorry if my code or anything i said is confusing. Thank you for reading!
update your css like the below (i.e. include overflow: hidden; to nav
CSS
nav {
background-color: #839496;
margin-bottom: 10px;
overflow: hidden;
padding: 0.02px 0;
}
At some point my floating link list has ended up with an indent, causing the last link to go onto a new line (or over the side of the div if I set a width for the ul).
I literally don't know where to start looking for this problem. I'm just going to go ahead and link to the website. Here's the HTML for that section:
<div id="navigation">
<ul id="navLinks">
<li>Home</li>
<li>Alston</li>
<li>Booking</li>
<li>Photos</li>
</ul>
</div>
And here is what I believe is the only CSS affecting it:
#navigation {
position: relative;
//width: 210px;
//height: 600px;
margin: 2px 0;
font-size: 90%;
font-weight: normal;
clear:both;
overflow:hidden;
}
//NAVIGATION BAR STUFF
#navLinks {
list-style-type:none;
//display:inline;
margin-left:auto;
margin-right:auto;
width: 100%;
padding:0;
text-align:center;
text-decoration: none;
overflow:hidden;
}
ul#booking {
color:rgb(84, 154, 14);
}
ul#navlinks {
text-algin: center;
margin: 0;
padding: 0;
}
ul#navLinks li { display: inline;
list-style-type: none;
line-height: 150%;
margin-right: 10px;
margin-left: 10px;
background-color: #fff; }
ul#navLinks li a
{
float: left;
text-align:center;
background-color: #ADF16A;
color: #000000;
text-decoration: none;
border-left: 0px;
border-top: 0;
border-bottom: 0;
border-right: 1px;
border-style: solid;
border-color: #7AE015;
width:161px;
padding:3px 0px;
}
ul#navLinks a:hover
{
background-color: #CC7A00;
}
ul#navLinks .lastLink{
border:0;
}
//ul#navLinks a
//END OF NAVIGATION BAR STUFF
The entire CSS is here
Thanks!
Your #navLinks has some left padding thrown in by browser default (in my cas, -webkit-padding-start: 40px;). If you define padding-left: 0;, that will be overridden.
You did cover this base in Line 195 of your style1.css, which has ul#navlinks { but that needs to be ul#navLinks {.
Make sure you're spell-checking your text-aligns, and capitalizing classes and IDs in your CSS file when they're capitalized in your CSS file.
If you add a css reset file to your site it should fix your problem, which is related to padding/margin on your UL.
A css reset file, amonst many other things, sets the padding and margin on all elements to zero - allowing you the freedom to style everything exactly as required.
http://meyerweb.com/eric/tools/css/reset/