I'm currently building a website (wesurf.co.il) and I'm having some trouble with the logo part. Im trying to make the logo stay on the left side ( next to the central menu).
while on 1920x1080 it looks good, in other resolution's the logo just blend with the menu or dissapearing.
thanks for helping.
http://prntscr.com/l3zprs you can set it like this change css for <a> </a> and <img/>
Try this code hope it will help :
<div style="display:flex; align-items: center; background:#888;">
<div class="logo-img"> logo </div>
<div class="menu" style="margin:auto;"> menu </div>
</div>
You can use this CSS. Also, you should use a SVG logo so it can scale on any device.
.logo-img {
width: 100%;
}
#header .nav-main.boxed{
max-width: 843px;
}
#header .logo {
padding-top: 10px;
padding-bottom: 10px;
float: left;
width: calc(100% - 873px);
}
Related
nav {
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
text-align: center;
}
.logo {
width: 10%;
}
<nav>
<div class="logo">
<img src="img/Logo.png" alt="Business logo" />
</div>
<div class="links">
Home
About
Products
Blog
Contact
</div>
</nav>
When declaring a class in HTML and then invoking in CSS i am having an issue trying to resize an image in the NAV to be smaller. Once looking at the image in the VS code live function i can get the image to go bigger but not smaller. im a bit confused but i am sure it is something small. would anyone be able to look at this and see whare i am messing up?
It will work better if you designate the class on the image you want to resize. For example, you have logo on your parent div that's nests the image, put the class directly on the image. See the changes I made below.
I added a 500x500px dummy image to demonstrate the size change. So if you declare a width: 10%; on an image with an intrinsic size of 500x500, it will render around 50px for the width (depending on the viewport).
.logo {
height: 100%;
width: 10%;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
}
.logo-parent {
width: fit-content;
}
.links {
white-space: nowrap;
}
<nav>
<div class="logo-parent">
<img src="https://dummyimage.com/500x500/000/fff&text=I'm+Resizing" alt="Business logo" class="logo" />
</div>
<div class="links">
Home
About
Products
Blog
Contact
</div>
</nav>
There are a few ways that you can fix this problem. One is just not to use the CSS and use the width and height built into the image tag.
here is an example of that.
<img src="img/Logo.png" alt="Business logo" width="100"/>
Another way it to give your image a class of logo
<img src="img/Logo.png" alt="Business logo" class="logo" />
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
I am making a header on a HTML page in which I have an image aligned to the left of the page and an image aligned to the right. I want there to be a center background color that is white when I enlarge the page horizontally, and that center white section to minimize to nothing when I shrink the page horizontally. Then the image on the right should be cut of from the right as the page shrinks.
The main problem I'm having is the image on the right goes down below the left image when I shrink the page. How can I fix this? The center section isn't white as well.
HTML:
<div class="navlogo">
<div class="left">
<img src="Weir-Logo.jpg">
</div>
<div class="right">
<img src="compass.jpg" />
</div>
</div>
CSS:
.navlogo {
width:100%;
background-color: white;
}
.navlogo .left {
float:left;
}
.navlogo .right {
float:right;
}
I would go with Turnip's answer, but here's another option for you for variety, if you like tables:
<table style="width:100%;background-color:white">
<tr>
<td align="left">
<img src="Weir-Logo.jpg">
</td>
<td></td>
<td align="right">
<img src="compass.jpg" />
</td>
</tr>
</table>
position: relative for the left image and position: absolute for the right image along with a z-index value on both should get you there:
.navlogo {
width: 100%;
background-color: white;
}
.navlogo .left {
float: left;
}
.navlogo .left img {
position: relative;
z-index: 1;
}
.navlogo .right {
position: relative;
}
.navlogo .right img {
position: absolute;
right: 0;
z-index: 0;
}
<div class="navlogo">
<div class="left">
<img src="http://placehold.it/400x200/f2f2f2/000000">
</div>
<div class="right">
<img src="http://placehold.it/400x200/000000/ffffff" />
</div>
</div>
With the "max-width" style the image will be resize.
<div class="left">
<img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
<img style="max-width:30%;" src="compass.jpg" />
</div>
So far you've got the old-school strategies covered: tables and position:absolute. Neither meets your requirement for "the image on the right should be cut off from the right as the page shrinks" and both can be problematic for a variety of reasons -- tables are, well, tables; and absolute-positioning, while sometimes necessary, tends to lead to fragile layouts; I try to avoid reaching for that part of the toolbox unless absolutely necessary.
In this situation I would depend on CSS background images, with an #media breakpoint to cover the two different layouts.
With this HTML:
<div class="navlogo"><div></div></div>
This covers the "the screen is wider than both images; put whitespace in between them" case:
.navlogo {
background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
background: url('//placehold.it/250x100') top right no-repeat;
min-height: 100px;
}
Then, for the "the screen is smaller than the two images, so cut the right-hand one off from the right":
#media screen and (max-width: 500px) {
.navlogo div {
background-position: 250px 0;
}
}
(The #media breakpoint here should be the width of both images added together. The right-hand image's background-position should be the width of the left-hand image. Adjust for body margins/padding as needed.)
If I understood you correctly, you were looking for something like this?
Fiddle: https://jsfiddle.net/7twgsx23/1/
You need to give the navlogo a height value in order to get the white background.
CSS:
.navlogo{
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
min-width:600px;
}
I also suggest using a middle div to get the desired layout.
HTML:
<div class="middle">
</div>
You can use non-breaking space to fill the middle div if you don't want any content there.
So to start this off I would like to just say that any help is appreciated, I'm not looking for the entire code laid out for me. I have tried to create this but fail every time as something disappears of it breaks the entire layout of the page. I am fairly new to programming but I have a pretty good grasp of concepts and I'm open to learning new things.
I would like to create a top bar like in this website, with the logo and social icons. No search bar.
http://www.complex.com/
Thank you to anyone for any help
First, as a general tip: Whenever you see something you want to recreate, right click on it in chrome and select "inspect element". Then you can look at the css used to create it.
To have social icons up like your example site, they've simple floated them right.
So HTML:
<div class="header">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
CSS:
.leftThing { float:left;}
.rightThing { float:right;}
The float will cause the element to go as far to the side you select as it can, then sit there. Here is a good css tricks article on the concept: http://css-tricks.com/all-about-floats/
I made you a litte JS-Fiddle to show you how to fix the header on top of the screen when you scroll down. Hope it helps a bit!
HTML:
<div id="WebContent" class="Content">
<img src='http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg'></img>
</div>
CSS:
.Header{
top: 0px;
left: 0px;
min-height: 50px;
max-height: 50px;
min-width: 1024px;
background-color: #2C2C2C;
color: white;
position: fixed;
}
.icon{
height: 50px;
}
.Content{
max-width: 300;
max-height: 300;
overflow-y: auto;
}
Fiddle: http://jsfiddle.net/wujood/pgqeLr7s/
Or you can just insert a fixed position to your header:
<div class="header" style="position:fixed">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
Apply either CSS float: left or display: inline-block to your elements.
http://jsfiddle.net/njoh7x73/
CSS code
.menu {
background-color: #333;
}
.menu div.item {
width: 64px;
height: 16px;
background-color: #888;
}
.menu .item {
float: left;
padding: 10px;
margin: 5px;
}
.menu .item:hover {
background-color: #555;
}
HTML code
<div class="menu">
<a class="item" href="#">LINK</a>
<div class="item"></div>
<a class="item" href="#">LINK</a>
<div class="item"></div>
<div style="clear:both"></div>
</div
If you use this approach (floating elements), don't forget to clear them.
I have the following html:
<div class="container">
<a href="url here">
<div class="logo">
<h1>Name</h1>
</div>
</a>
</div>
and css:
.container {
width: 20%;
}
.logo {
background: url(images/ui-sprite.svg) no-repeat 0 0;
text-indent: -9999px;
height: 30px;
width: 150px;
margin: 25px 0;
}
The issue I have is with linking the logo (background image). At the moment the link area you can hover over is the full width of the container div, despite the fact that the logo class has a defined width. Any ideas here on best practice with linking of background images?
Thanks
Found this to be ultimately useful, and less markup too!
http://ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/