Images I place are blocking me from clicking links, and I think it is because the image is possibly larger than I thought (though I think I cropped it and I am not sure if it is something else.
Here is a picture (I moved he image as far over as I could in order to avoid this issue, but I would like to move the image closer if this problem can be fixed and I feel it will be helpful to know in the future):
Note: If I move it right it does not push the content or anything, it just makes the links in the nav bar unclickable (if that was not clear).
Here is the HTML:
<nav>
<ul>
<li class="current">Home</li>
<li>Jehovah's Witness</li>
<li>Wood Block Print</li>
<li>Jazz</li>
<li>Being Ethical and Socially Responsible </li>
</ul>
</nav>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
Designer Websites
</h1>
</header>
and my CSS:
nav ul
{
list-style-type: none;
text-align: center;
}
nav ul li
{
padding: 5px;
display: inline-block;
border: solid 1px black;
color: black;
background-color: tan;
}
.current
{
background-color: yellow;
}
body
{
background-color: tan;
font-family: Arial, "Times New Roman", "Sans Serif", Georgia;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
h1 img
{
height: 40%;
position:absolute;
left:-15px;
top: -30px;
}
New picture with the absolute position removed:
I think your "absolute" positioned banner image was floating over navbar. That's the reason it was not clickable.
Remove this code (You may keep the "height" to set fixed height for your image)
h1 img {
height: 40%;
position: absolute;
left: -15px;
top: -30px;
}
Now image and heading will be left aligned. You can simply align them by adding text-align:center in .container. Or you can add this code:
header {
text-align: center;
}
Try adding this in order to put anchor "above" the img
h1 img {
z-index: 1;
}
h1 a {
position: relative;
z-index: 2;
}
Related
I want to create a navbar with the name of the store. For a project of a course, I managed to make the navbar work, I just need to place its elements. However, the name of the store is written as in its logo, so it is an image (shrunk by code). I am having difficulty getting the text to be aligned in the middle with the image. As a result, I am left with the image and the navigation words below it, which I cannot center in the middle of the navbar.
Thanks for your help
Btw, the course staff said that I cant use flex.
Im Argentinian, so thats why some comments are in spanish
html code
<header>
<div class="navbar"><!-- Menú de Nav -->
<img src="./Img/Solo letras.png" alt="Nombre Dernocua">
<nav>
<ul class="Links">
<li>Contacto</li>
<li>Nosotros</li>
<li>Inicio</li>
<li>Productos</li>
<li>Ubicación</li>
</ul>
</nav>
</div>
</header>
Css code
/* Controla tam img */
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
/* header (navbar) */
.Logo {
display: block;
align-items: center;
height: 100px;
width: 200px;
}
header {
position: fixed;
width: 100%;
height: 10%;
padding: 10px 30px;
background-color: #DDA15E;
transition: all .50s ease;
}
.Links a {
align-items: center;
color: #283618;
font-size: 1.5rem;
font-weight: 200;
padding: 5px 0;
margin: 0px 30px;
transition: all .50s ease;
}
.Links li {
display: inline;
padding-right: 5px;
}
.Links a:hover {
text-shadow: #283618 1px 1px;
color: #ff7b08;
I tried everything I know.
Vertical aling: center
top: #px
left: #px
I dont remember everything, bcs Im stuck in this part since yesterday.
I was hoping to have the img on the side, as it is positioned at the moment. And align the navbar options in the center. Their location would be secondary, but I was also hoping to put them in the middle of the navbar.
You can use flexbox for this, it is as simple as that.
.navbar {
display: flex;
align-items: center; /* flex property for vertical alignment */
}
I am coding a practice site using Microsoft Expression Web 4 but I am having a lot of difficulty getting past the landing page. I have all code copied below the questions. The first problem is that I have a hover effect on the links in the nav menu that overlaps the nav bar and I want the text centered within the nav bar vertically. I have tried several how-tos on css-tricks.com and the browser display doesn't seem to respond to the edits I make I tried from there. navbar issue and overflowing image I can manually adjust it so that if fits by figuring out pixels by trial and error but this seems clunky and non-responsive. Is there a better way?
The second question is the image I have for the header section is not fitting the screen properly. It overflows on the right side. It didn't do this before, but now it is and I haven't changed any of the code in the #header img {} section, so I am not sure what happened. I'm pretty much a beginner at this so thanks for any help.
HTML
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="header">
<div class="nav">
<div id="menu">
Home
Travel
Safari
Live
Search
</div>
</div>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</div>
</head>
CSS
#header {
position:relative;
width: 100vw;
height: 600px;
overflow:hidden;
right: .5em;
bottom: 1em;
}
#header .nav {
display:inline-block;
height:40px;
width:100%;
background-color:#a41d0e;
overflow:visible;
z-index: 10;
}
.nav #menu a{
display: inline;
float:left;
position: relative;
vertical-align:middle;
padding: 1em 1em 1em 1em;
text-decoration: none;
color: white;
}
.nav #menu a:hover {
background-color:#7f170b;
}
Use CSS properties display: flex and align-items: center to center vetically items in a row.
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
height: 40px;
padding: 1em;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
<html>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</header>
<body>
<html>
Nothing except the link tag should be between <head></head> in the exmple you gave! I assume that's a mistake.
#header {
width: 100vw;
height: 600px;
overflow:hidden;
}
technically you don't need any styles for your header. See css for img below. If you want to your header to be 600px, and have your image fill it, you should set your image as a background image in css
background-image: url('path/to/img.jpg');
Alternatively, you could :
/*style your image like so. It won't ever be wider than its immediate parent container*/
img{
max-width: 100%;
height auto;
}
Here is the rest of your css, commented.
#header .nav {
/* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */
height:40px;
background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/
}
As far as the links go you don't need to give them a top and bottom padding, just give them a line-height that is equal to the height of the container, that is 40px. That way the links will be vertically centered, with the same height as their container, and you will still be able to give them the width of your choice with left and right padding.
.nav #menu a{
/*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
float:left;
line-height: 40px;
padding: 0 1em 0 1em;
text-decoration: none;
color: white;
}
Very useful link where you'll find a whole lot of very useful explanations on all things CSS : http://tympanus.net/codrops/css_reference/
Hope any of this helps!
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
padding: 15px 35px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
.outer {
width: 100%;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: 0;
left: 0;
width: 100%;
}
img {
position: relative;
left: 0;
right: 0;
width: 100%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
top:0;
right: 0
}
</style>
</head>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<div class="outer">
<div class="inner">
<img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
<h1>Visit Africa</h1>
</div>
</div>
</header>
</body>
</html>
I am doing something wrong here but what is it I am not being able to figure out. Is something wrong with my code? Whenever I try to make the screen size smaller the content must be fixed up to a certain width but it's adjusting itself and nothing is displayed beyond it. And here is the jsFiddle with the image of what is wrong below.
HTML
<div class="sitefeed">
<!-- this is the start of site -->
<header>
<div class="wrap head-rel">
<ul class="nav">
<li>Home
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
<ul class="logo">
<h1>Naveen Niraula</h1>
</ul>
</div>
</header>
<div id="main">
<article>
<div class="wrap">
<h1>This</h1>
<p>My dear has kinda some typo somewhere.</p>
</div>
</article>
</div>
<!-- and here is the end -->
</div>
CSS
* {
margin: 0;
padding: 0;
font-family: consolas;
}
html {
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: auto;
}
.sitefeed {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.wrap {
max-width: 901px;
min-width: 900px;
margin: auto;
padding: 0 5px;
}
/* ------------- header here ------------------- */
header ::-moz-selection {
color: #6cccf2;
}
header ::selection {
color: #6cccf2;
}
.head-rel {
position: relative;
}
header {
background: #3b5998;
color: #fff;
}
/* ----------- navigation goes right here ---------------- */
.nav {
list-style-type: none;
position: absolute;
bottom: 0;
right: 0;
}
.nav li {
display: inline-block;
}
.nav li a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
}
.nav li:hover {
background: #000;
}
.nav li a:hover {
color: #fff;
}
/* ------------------------ main content goes here ------------------------ */
#main ::-moz-selection {
color: #a0249c;
}
#main ::selection {
color: #a0249c;
}
#main {
background: #e1e1e1;
}
I want it to display the whole content even when the viewport is small but if the viewport exceeds the webpage I want the background color to measure up to fill that space(left and right). Like the image below . But when I remove the width from .sitefeed it's not possible.
Solved.
It seems like table-layout:fixed; was causing the problem but now I fixed it!
Try taking the overflow:hidden out of your HTML style.
In this case when you work with the fixed width, just add this with to header and #main, which are both parents of .wrap with fixed width.
header, #main {width: 900px;}
http://jsfiddle.net/cj9pvz5o/
If I understand your question right, you don't want the following code:
.sitefeed { width: 100% }
If you remove this width, you get the background over the whole layout no matter if its outside of the viewport or not. Block elements (display: block) will always take as much width as they can, if not used in conjunction with float. I guess they same is true for display: table. This will take only 100% of the viewport and thus cut the background color at the point where the other content overflows.
Here is an updated jsFiddle: https://jsfiddle.net/nkwxw9gj/3/ Do you wanted to achieve this?
Note: the reason why it overflows from the viewport is your use of min-width: 900px within .wrap-rule. Change that in case you don't want to overflow for reasonable resolutions.
For my header I'm using the ul and li tags for my nav menu (Portfolio/Contact/About) I'm trying to place the images text (Portfolio/Contact/About) and the slashes in the CSS file instead of my div "navigationMain" in the HTML file but every attempt I tried has failed. Is there a certain way dealing with ul, li tags and placing images within the tags using CSS? Because I've placed my logo and header background in the header within the css file. Also I'm creating this website in notepadd++
http://jsfiddle.net/J4h9Q/7/embedded/result/ http://jsfiddle.net/J4h9Q/8/
HTML:
<div class="header">
<div class="container">
<div class="headerMain"> </div>
<div class="navigationMain">
<ul class="nav">
<li><img src="images/portfolio2.png" alt="portfolio" id="portfoliobutton"></li>
<li><img src="images/slash.png" alt="slash"></li>
<li><img src="images/about.png" alt="about" id="aboutbutton"></li>
<li><img src="images/slash.png" alt="slash"></li>
<li id="contactbutton" class="contact"><img src="images/contact.png" alt="contact"></li>
</ul>
</div>
</div>
CSS:
body,div,ul,li,p{
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
height:100%;
background: url(../images/background11.png) repeat scroll 0 0;
}
.header {
background: black;
height: 165px;
min-width: 1075px;
}
.container {
height: 165px;
margin-left: auto;
margin-right: auto;
width: 1075px;
}
.headerMain{
height: 165px;
position: relative;
width: 195px;
float: left;
left: 20px;
top: 4px;
background:url(../images/ARlogo8.png) no-repeat center center;
}
.navigationMain{
height: 154px;
margin-left: auto;
margin-top: -4px;
position: relative;
width: 665px;
right: 30px;
}
li{
display: inline;
}
.nav li{
display: inline;
color:white;
position: relative;
top: 70px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
left: 160px;
font-size:44px;
}
How tied are you to putting the images in CSS? I recommend putting the slashes, if anything, in the CSS. That would immediately reduce the number of list items down to 3 - so it's more "semantic". You should not have a list item just to denote a slash.
Demo: http://jsfiddle.net/YBzA9/1/
Feel free to tweak the dimensions in .nav a when you use your real images.
After you reduce the number of list items, consider one of the following:
(easy solution) putting the images inside of anchor tags in the markup and calling it a day
(a more "correct" solution) styling your anchor like such:
HTML
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul
CSS
.nav li {
background: url('http://dummyimage.com/26x34/000000/fff&text=//');
padding-left: 26px;
}
.nav li:first-child {
background: none;
}
.nav a {
display: block;
text-indent: -999px;
height: 35px;
width: 120px;
}
#portfolio-link {
background: url('http://dummyimage.com/146x35/000000/fff&text=Portfolio');
}
#about-link {
background: url('http://dummyimage.com/146x35/000000/fff&text=About');
}
#contact-link {
background: url('http://dummyimage.com/146x35/000000/fff&text=Contact');
}
This allows text to still be read (search engines, screen readers) but still maintain visual appeal.
You could set that images as background without repeating it. You also need to set a min height and width to be sure that you can see the image later. You can also store the image in the css file if you store it base64 encoded.
In general I would just fix the links to your images. Try using absolute urls beginning with a single slash.
im wondering if anyone could please help me with a css / html issue.
I have a complex background image. The menu div is positioned at the correct location to overlay the background where it is ment to position. The entire LI has a hover rollover image with a display type of block. The result is that when the mouse is over the list href the entire block rollover works..
The problem happens however when i attempt to add padding to create a buffer between the list item text and its border.. Things start to go funny... I'll add a screen shot.. Padding is required to move it from the border.
The second problem exists that i cant valign the text to the middle without applying a line height.. The solution works great until items wrap.. I need to be able to wrap menu item text..
The below example shows the state with the current CSS/HTML. The menu bar and rollover are in place as expected. Amend i cant place the image to to restrictions on posting as a new person here.. The example can however be found at 213.40.100.100 / example1.jpg
The below example shows the state when padding OR margin is added. The LI seems to completly shift, not moving the interal text..
213.40.100.100 / example2.jpg
<div id="wrapper">
<div
id="header">Header</div> <div
id="menu">
<ul>
<li><a>Contact Us</a></li>
<li><a>Recommends</a></li>
<li><a>Deals</a></li>
<li><a>Home</a></li>
</ul> </div> <div id="content">Content</div>
<div id="footer">Footer</div>
</div>
#charset "utf-8"; /* CSS Document */
* { margin: 0; padding: 0; }
body {
padding-top: 10px;
background: url(background.jpg) no-repeat center top; height:100%;
}
div#wrapper {
margin: auto;
height: 100%;
width: 978px;
min-width: 978px;
}
div#header {
height: 196px;
}
div#menu {
height: 69px;
position:
relative;
}
div#menu ul {
height: 69px;
list-style-type: none;
}
div#menu ul li {
display: block;
height: 69px;
width: 140px;
float: right;
padding: 5px;
}
div#menu ul li a:hover {
display:block;
background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#menu ul li a {
text-decoration: none;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#content { margin-top: 80px; }
I think you are adding the padding to the wrong element.
or you add a "margin" to the <li> or you add a padding to div#menu
I should do this:
A div#menu with the yellow gradient background, with the 5px padding and a margin: 80px 0 0 0;
Inside this div, the <ul><li>...</li></ul>
You don't need to add any padding or margin to the li, just be sure the height of each li is less than the div#menu heigh + padding.