I have custom slider sitting at the top of my page but I'm having some issues. I would like the list items to stretch to the width of the screen but I'm having issues forcing this because the list items display below one another. I have set them to float and I have a div surrounding the list with an overflow hidden but to no avail.
I want it so that the current slide is the width of the screen regardless of size, possibly with a min width of 960px
HTML
<div id="slider">
<div class="slides">
<ul>
<li class="slide">
one
</li>
<li class="slide">
two
</li>
<li class="slide">
three
</li>
</ul>
</div>
</div>
CSS
#slider {
position:relative;
margin:0 auto;
top:85px;
width:100% !important;
}
.slides {
margin:0 auto;
overflow:hidden;
text-align:center;
position:relative;
left:0;
}
.slide {
height:630px;
width:100%;
float:left;
position:relative;
}
Try this...
Add a css class like following.
.ul_class {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
After that, assign this new class (ul_class) to your <ul> like this.
<ul class="ul_class">
...
...
...
</ul>
Hope this will help you.
Related
I have a dilemma with some code in HTML & CSS, when I add a simple header with an image and I set properties to image {height:100%;
width: auto;} it works, but when I have the image in more complex code isn`t working anymore.
In the smaller code if i change height of header the images change as well,but on second code if i change height of header image stays on same size
Can someone please explain to me why that happens?
Down here i have two code snippets to see what I`m saying
header{
height:80px;
background:#eee;
}
.header-content{
display:flex;
}
.header-content img{
height:100%;
width:auto;
}
.links-list{
display:flex;
margin-top:50px;
}
.links-list li{
margin-right:4rem;
}
<!-- !Header -->
<header class="header ">
<div class="container">
<div class="header-content">
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">
<div class="menu-links">
<ul class="links-list">
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
</ul>
</div>
</div>
</div>
</header>
nav{
background:#eee;
height:80px;
}
nav img{
height:100%;
width:auto;
}
<nav>
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">
</nav>
Here is the codepen link for reference: https://codepen.io/anon/pen/pmEgaM
you just need to keep the styling for header as height: 100%; and keep changing height of image in the header-content img styling this will give you expected result
header{
height: 100%; # this will make sure your header height is 100% irrespective of image geight
background:#eee;
}
.header-content img{
height:100%; #this height you can change
width:auto;
}
I've been trying to make a page in which there will be one image that needs to be the same height as the viewport while the width would stretch accordingly. The img needs to be centered.
Here's the tricky part (for me anyway): I would need to place a div at the bottom of that image which would have some buttons. I thought that it would be best if I can set the width of that div to be the same as the width of the img so that whenever the screen size changes, everything would stay at the same position.
Here is what I have so far in the HTML:
<div id="main_container">
<div class="exercises">
<img class="bg" src="image.png"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
So: height is always == viewport, width is variable.
I thought about placing a div as parent to the img, but I would still need to make that div somehow fit the size of its child (the image).
I've read some posts here, but none were too related to my issue.
edit:
I'm sorry if I wasn't clear enough. I've made an illustration of what the issue is. I hope this helps:
You can try this:
#main_container {
width:600px;
}
.exercises {
width: 100%;
}
.exercises img.bg {
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.footer .buttons {
width: 100%;
}
.buttons {
padding:0;
margin:0;
}
.buttons li {
width:100%;
height:50px;
border:1px solid #000;
list-style:none;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Obviously, edit the image URL to your own :)
Consider it a start. Change size of image in inspector and see what happens.
.exercises{background: silver; display: inline-block;}
img{ border: 1px solid black;}
ul{
margin: 0;
padding: 0;}
li{
float: left;
width: 33%;
background: #ccff00;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://www.techwibe.com/wp-content/uploads/2015/04/chrome_medium.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Try this one may help
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
<style>
#main_container{
/*Make the container follow the width of body*/
position:relative;
width:100%;
}
#exercises{
/*Make the this div follow the width of #main_container*/
width:100%;
}
.bg{
/*Make the the image follow the width of #exercises*/
width:100%;
height:auto;
}
.buttons{
/*modifying ul to the bottom position*/
position:absolute;
width:100%;
bottom:0;
}
.buttons li{
/*Style the button whatever you want*/
list-style:none;
margin:10px 2%;
padding:8px 12px;
background:orange;
width:20%;
color:white;
float:left;
}
</style>
Run code snippet to see the result
I apologize again if I've set the question in a vague manner. It was a bit complicated (for me) to formulate it. And thanks to the people who tried to help me with their solutions.
However, I decided to got with JQuery on this one and set the sizes dynamically.
This is the code with which I managed to set the width of the parent div the same size as the width of it's child img (after the img's height has been rescaled relative to the window height):
var imageResize = function () {
var screenHeight = $(window).height();
$('.bg').height(screenHeight);
var resizedImgWidth = $('.bg').width();
$('.exercises').width(resizedImgWidth);
}
$(window).resize(imageResize);
$(window).load(imageResize);
As always, anyone is welcome to give their two cents regarding my solution. (perhaps its very heavy and could be better optimized. I'm new at JS, so feel free :))
Hello I'm currently working on a website where I want the logo of the business to overlap into the content.
Similar to this website: http://www.menzies.com.au/
I'm not really sure how to approach this problem, I tried using negative margin, and z-index, but it just felt like the wrong approach
Example Code of what i've tried
<div class="container">
<ul class="nav nav-pills">
<img src="logo.jpg" style="float: left; z-index: 3;">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Home</li>
</ul>
<img src="http://all4desktop.com/data_images/original/4172874-nordic-landscapes.jpg" style="z-index: -1; margin-top: -50px;">
</div>
What's occurring is that the second image is overlapping the logo image. It also just feels like a clunky way to approach the problem as I've never seen people advocate using negative margin unless absolutely necessary
Could anyone with experience in doing this point me in the right direction?
Basically what you need do is set the logo position to absolute, then it will be over the other elements. I did a example to you, look at this HTML:
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
The menu div has 75px of height, but his child can have more than this, and if they do, a overflow will occur, that is what you wanna. If it doesn't occur, as I said, you can try set the position to absolute. So, you set the logo div to something like 130px of height, and the nav to 100% height. I changed the height of logo to 130px, but it doesn't affect the other menu child. So, the nav height will be the menu height: 75px. Complete code:
#menu {
width:100%;
height:75px;
background-color:#333;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
}
.logo {
width:150px;
height:130px;
background-image:url('http://placehold.it/150x130');
float:left;
position:absolute;
margin-left:25px;
}
nav {
color:#fff;
float:right;
font-size:1.3em;
line-height:75px;
margin-right:10px;
height:100%;
}
nav ul {
margin-top: 0px;
}
nav ul li {
margin-right:10px;
}
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
This problem is very relative, but with a simple CSS like this one, you can contour this.
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.
so I am starting to learn CSS and I can't wrap my head around this.
I want to make a horizontal navigation bar composed of 3 images. These are the beggining image, the "filler image", and the ending image.
Here is a picture for further reference:
I really don't know how to go about doing this and I havn't been able to find any examples on the web for this.
Thanks in advance!
I'm preparing a jsfiddle demo for you, hang on.
It's pretty ugly, but it should give you a starting point on how to tweak it so it works as you wanted. http://jsfiddle.net/T9FXD/
Markup:
<div>
<div class="first"></div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="last"></div>
CSS:
div {width:600px;height:61px;}
div.first {background-color:red; width:20px;float:left;}
li {display:inline; color: #fff}
nav {width: 500px; background:url('http://placekitten.com/g/1/61') repeat-x top; float:left;}
div.last {background-color:green; width:20px;float:left;}
I'm an hour late to this party, but most of these answers are markup overkill. An unordered list of links has all the styling hooks you need. Basically, padding left on the first li and put in the left image. Padding right on the last li and put in the right image. Main image on the a.
html:
<ul class="example">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
css:
ul.example {
margin:0;
padding:0;
font-size:0; /*this gets rid of the gaps between the items*/
}
ul.example li {
display:inline-block; /*this puts them all in a row*/
margin:0;
}
ul.example li:first-child {
padding-left:10px; /*set this to the width of your left image*/
background-image: url(http://dummyimage.com/10x61/f00/fff);
background-repeat:no-repeat;
}
ul.example li:last-child {
padding-right: 10px; /*set this to the width of your right image*/
background-image: url(http://dummyimage.com/10x61/00f/fff);
background-repeat:no-repeat;
background-position: top right;
}
ul.example li a {
font-size:16px; /*important to set this, as the ul has 0 height text*/
display:block;
height:61px;
line-height:61px;
text-align:center;
width:100px;
background-image: url(http://dummyimage.com/1x61/0f0/fff);
}
http://jsfiddle.net/EKacC/
HTML:
<div class="wrapper">
<div class="firstImage">
<!-- no content, simply assign a background-image -->
</div>
<div class="headerContent">
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<!-- as many as items as you have -->
</div>
<div class="lastImage">
<!-- no content, simply assign a background-image -->
</div>
</div>
CSS:
.firstImage {
float: left;
background-color: red;
width: 50px;
height: 150px;
}
.lastImage {
background-color: blue;
float: left;
min-width: 50px;
height: 150px;
}
.headerElement {
float: left;
background-color: yellow;
width: 50px;
height: 150px;
border: 1px solid black;
}
Not the most elegant solution, but should do it for the beginning. There are - of course - more elaborate solutions... but I think this might work as well for you at the moment.
EDIT
Here is the above markup and css as a working example. I've put borders around the inner (yellow) cells for better visibility.
Stick with using <div> elements for this. Even though tables handle it well, it's more depreciated as they load slower.
It's literally as you depicted the image, with 3 main boxes.
HTML:
<div class="element1"></div>
<div class="element2">
<ul>
<li>Home</li>
<li>About</li>
<li>Forum</li>
<li>Content</li>
</ul>
</div>
<div class="element3"></div>
CSS:
When you have empty div elements, be sure to set dimensions within CSS so that it can show the image you'd like to display.
.element1, .element2 {
width:10px; height:100px;
}
For the image itself.
background:url('...') no-repeat;