Looking to resize a big image down to a thumbnail within a list item:
HTML code
<div class="header">
<ul class="nav">
<li><img src="imgs/logo.jpg"></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS code
.header {
width: 100%;
}
.nav {
max-width: 92.5%;
margin: 0 auto;
padding: 1% 0% 0.75% 1%;
}
.nav li {
display: inline;
font-family: 'Raleway', sans-serif;
font-size: 1em;
font-weight: 600;
margin-right: 2%;
}
No matter what I try, the image breaks out of the li "box" ... I can obviously resize it to fit inside, but I want it to take up the entire li box based on how big the other li are... any suggestions?
add image as background:
background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
check this
https://jsfiddle.net/nqo79yxm/4/
Provide the height to the img tag.
Like below:
img{
height :20px;
}
Now the image will have a fixed height, otherwise the image will take height: auto.
Related
I have a problem where the links are not shown in a row but instead some of them are stacked underneath eachother. Are there any step by step tips out here on how I can solve it and also an explanation to why my links in the navbar shows up messed up?? I only wanna use CSS and HTML, no JS.
Please take note: I have a picture of how i want the header to look and also a print screeen of how it looks in GChrome right now. However i am not familiar with posting questions here on StackOverflow so i dont know how to post 2 images in the same question. So please dont be too hardjudging since I am a beginner.
header {
border-bottom: 4px solid #000;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
.header ul {
padding: 0;
margin: 0 0 0 150px;
list-style: none;
float: right;
}
.header li {
float:left;
font-family: 'Brother 1816';
font-weight: bold;
font-size: 2rem;
color: #000;
}
nav {
width: 100%;
background: #FFFFFF;
overflow: auto;
}
nav a{
width: 400px;
display: block;
text-decoration: none;
color: #a71b1a;
}
<header class="header">
<div class="logo"> <img src="logo/logo_250x150.png" alt="Freyas logotype.">
</div>
<nav class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PORTFOLIO</li>
<li>SERVICES</li>
<li>CONTACT ME</li>
</ul>
</nav>
</header>
How it should look
How it looks
The width property associated with your links is causing them to take up 400px each which then wraps down the page
nav a{
width: 400px;
}
remove the width property and the links should sit on the same line.
Alternatively use flexbox https://www.w3schools.com/css/css3_flexbox.asp to space the links across the page as you desire.
Width and display: block in your a tag are causing the issue. Also add display: inline to your <li> properties to make elements render in the same row.
I'm trying to add an image to my navigation bar, and fit the image to the navigation bar, however I could not manage to resize the image for this purpose; no matter what I did the image just extends to the whole page. I am quite new to HTML & CSS, could you please explain how to fit the image to the navigation bar?
#profile-image {
height: auto;
width: auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>
try with this
#profile-image{
height:auto;
width:auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img{
object-fit:cover;
}
nav{
overflow:hidden;
}
I just added the rule for nav and the cover for th eimage
How large do you want this image to be on the navbar? Let's say you want it to be 100px by 100px.
First you need to set the height and width of the parent element of the image. I just gave the div with id profile-image a height: 100px and width: 100px.
Next you need to tell the <img /> tag to conform to these dimensions. We can do that by giving it a style of height: 100% and width: 100%.
#profile-image {
height: 100px;
width: 100px;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img {
height: 100%;
width: 100%;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>
I'm not sure what you're trying to achieve so this is something of a guess:
nav {
display: flex;
align-items: center;
background: #eeeeee;
}
#profile-image {
flex-basis: 20%;
font-size: 0;
}
#profile-image img {
width: 100%;
}
ul.menu {
display: flex;
margin: 0;
justify-content: space-around;
flex-grow: 1;
list-style-type:none;
padding:0;
}
ul.menu li {
padding:10px;
}
<nav>
<div id="profile-image"><img src="http://placekitten.com/150/150" /></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
If you want to "fit the image to the navbar" then you need to give the nav bar a size for the image to fit into.
You can probably get rid of the profile-image div if you wish, unless you want to add special styles to the image area.
I am assuming that you want the image to be like an icon on the left (because you added the float: left style), as opposed to an image that covers the entire nav bar like a background image would.
If that's the case:
nav {
height: 150px; or whatever you want the image and the nav bar to be
}
#profile-image {
height: 100% or you can use the same height as the nav style
width: auto; That will keep the image proportions correct
float: left;
padding-left: 2%;
margin: 0 auto; <== not sure what you are doing here. Try deleting it as it won't help.
padding: 10px 0;
}
I have two columns 41% and 59% of the total screen width each. The height of the columns is 1102px.
In the first column I have 4 divs. The first one is for the navigation and it can be maximum 60px. The second one is for a logo I am using. The third one is for text and the fourth one is the trickiest one. I am using an image which does not have the same size and ratio. I want the image to get the 100% of the width.
My challenge is to get the height of the first image and the text divs to be dynamic depending on the heigh of the bottom image in the first column. For example, the margins are really big when the screen size is big :
body{
color: #fff;
font-family: Arial;
}
.wrapper{
background-color: #484848;
}
#col1{
float:left;
width:41%;
height: 1102px;
background-color: #E90649;
position: relative;
}
img#productImg{
width:100%;
height:auto;
}
img#product{
max-width:100%;
}
#col2{
float: left;
width:59%;
height: 1102px;
background-color: #124;
}
div #centerText{
width: 70%;
margin: 0 auto;
height:455px;
}
#productLogo{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 70%;
}
.list {
padding-right: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 4px;
color: #000;
font-size: 18px;
font-weight: lighter;
}
div.nav{
padding-top: 3%;
height:24px;
padding-left: 5%;
}
#productImg img{
width:100%;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li>HOME</li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
</html>
I used the #media screen-size feature but still I am not happy with the results as I have to put many lines in the CSS. Ideally, the part with the first logo (stackoverflow) and the text will be vertically aligned to center and the padding-top, padding-bottom will have the same value (percentage). The height of this div will depend on the height of the bottom image (JS parsing possible here?) and thus the text can be dynamic using the vw or vh in the CSS.
Is there an easier way to align the divs in the column and keep everything without breaking (that was the initial problem)?
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.