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/
Related
By design, I have a site container. I need to create one block so that there are no container restrictions on the right, but they are on the left.
On the design below, the image should be pressed to the right edge of the page, and the container limits should be on the left.
How can I make such a block?
My HTML:
.container {
width: 100%;
max-width: 1260px;
padding-right: 30px;
padding-left: 30px;
margin-right: auto;
margin-left: auto;
}
.main-screen {
width: 100%;
background: linear-gradient(180deg, #dedde2 0%, #e3e6ed 44.29%, #dde6ef 100%);
}
.main-screen-content {
display: flex;
justify-content: space-between;
padding-top: 118px;
}
<section class="main-screen">
<div class="container">
<div class="main-screen-content">
<div class="main-screen-title">
<h1>
Replace awkward lab visits with at-home <span class="blue-text-style">STI testing</span> and
<span class="orange-text-style">treatment</span>.
</h1>
<div class="site-button main-screen-button">
<button class="text-button">
Get started
</button>
</div>
</div>
<div class="main-screen-img">
<img src="./img/main-screen-img.png" alt="">
</div>
</div>
</div>
</section>
I prefer to add the blue bg with the image as a single image and add it as a background. But I could see in the comment section this method is not suitable for your need.
Alternative way,
How about adding blue color as a background to the main section And positioning the person image using position: absolute; right: 0; bottom: 0; to the section.
This question already has an answer here:
Make background image the size of screen
(1 answer)
Closed 5 years ago.
Ok, so my question is how do I make my image more responsive? I am a new coder, so I'm still trying to understand css more. I've tried using the contain value, but it doesn't cover the entire div. I also tried cover, but it doesn't show the entire image when it expands inside the div. If anybody has any ideas at all, I would love to hear from you. Thanks Also, it's not the same question as covering the entire page. I want the image to cover inside my div, and it doesn't seem to be working.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background: url(dickgregory.jpg);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Your image is taking up the full width and height of your .tribute element. The problem is that you've both added margin to the .tribute element, and restricted its width.
Removing the margins and setting width to 100% shows the image covering the full area as expected.
Note that background-size: cover may stretch or crop the image, and background-size: contain will resize the image to ensure that it is always visible.
This is best demonstrated with an example.
Contain:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: contain;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Cover:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Hope this helps! :)
Unfortunately cover and contain are the best ways to handle an image that isn't the proportion you want. You could use an <img> tag instead of a div with a background image, if that would work for your use. Otherwise, I usually add a background color to the element that is similar to the image, so that it blends in better.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #666;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
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'm trying to get the first initial first section to take up the whole height of the page.
I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.
My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.
Like this:
Spotify also do it on their website
My HTML:
Title
<body>
<span id="top"></span>
<div id="floater"></div>
<div id="centered">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navbar">
<a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
</div>
</div>
</div>
</div>
<div>
<a>Random Text here, blah blah blah!</a>
</div>
</body>
My CSS
html,body{
border: 0;
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-25px;
width:1px;
}
#centered {
position:relative; clear:left;
height:50px;
margin:0 auto;
}
#sticky_navigation_wrapper {
width:100%; height:50px;
}
#sticky_navigation {
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
}
I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).
like so
<div class="section">
<p>Hello World</p>
</div>
<div class="section">
<p>Hello World</p>
</div>
You can then give that div height: 100% and width: 100% like...
.section{
height: 100%;
width: 100%;
}
You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/
I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.
To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;
<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>
and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.
<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div>
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.
Use Viewport Height.
Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.
.section_div {
/* fill up 85% of screen heigth */
height: 85vh;
/* fill up 100% of screen width */
width: 100vw;
/* you can also use min-height instead of height. */
}
I'm learning CSS at the moment and I am using it on a website to control the layout of the site.
I Have a number of containers, 5 of them, all on top of each other, I have a background for the page but I also want to use a background for one of the containers. So I used the 'background-image:url("");' tag to use a background, the I also used the attachment, repeat. The problem I was the image wasn't setting itself to the container, it was pushing out way past the dimensions that I had set in my CSS code which were height:312px; and width: 1000px;
Here is the CSS
html, body
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
}
.hidden
{
display: none;
}
#page-container
{
width: 1000px;
margin: auto;
background: transparent;
}
#header
{
height: 130px;
}
#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
}
Here is the HTML:
<div id="page-container">
<div id="header">
<div id="flashContent">
</div>
</div>
<div id="content-top"><!--<img src="images/pic.png">--></div>
<div id="portfolio-container">
<div id="portfolio1"><p>1</p></div>
<div id="portfolio2">2</div>
<div id="portfolio3">3</div>
<div id="portfolio1"><p>4/p></div>
<div id="portfolio2">5</div>
<div id="portfolio3">5</div>
</div>
<div id="main-content">
main-content
</div>
<div id="footer">Footer</div>
</div>
I haven't pasted all of the CSS but its needed let me know.
Its as if the background is filling a space that is a lot bigger than the space specified.
Last time I needed to do something like this, I did the following:
#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }
And then on my page I included the following:
<img id="background" src="whatever.jpg" alt="" title="" />
And that was it. This actually works quite nicely, with the background image magically resizing itself until one of the dimensions (width or height) reaches the maximum specified.
It doesn't need CSS3 support. Try it and see.
Obviously tweak the positioning stuff if you don't want it to fill the screen (I did).
You will have to set background-size to 100%
It only works in browsers supporting CSS3
Try float:left in #contentTop
Hope that helps!
In css you also have background-size:contain/cover