I am working on a 960 px-design at the moment, and I am trying to do a menu in where it is supposed to be 6 "buttons" with a 5 px margin between each one. I know how to do this, and I cannot seem to find what is wrong with my code. It would be very helpful if someone could look through my code with some fresh eyes and tell me where the issue is...
http://jsfiddle.net/9tx8v/
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
Sorry for include a shitload of unnecessary code, but I'm so fed up atm I might just include the whole thing...
Thanks in advance
How about closing your DIV's? And you need a float:left for any DIV
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}
First at all as a better practice keep the closing tags for </div> elements.
<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...
Then just float each element you don't need to float the nav:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float:left; /* Add this*/
}
Check this Demo Fiddle
First, close your divs:
<div id="två"><img src="menu.jpg"/></div>
<div id="tre"><img src="menu.jpg"/></div>
<div id="fyra"><img src="menu.jpg"/></div>
<div id="fem"><img src="menu.jpg"/></div>
<div id="sex"><img src="menu.jpg"/></div>
Add float: left in you css:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float: left;
}
<nav> should contains <a> , else it is not a <nav>.
Do not forget to close your tags and adapt their display if needed on a row , sized or on top of each others :)
Related
This question already has answers here:
When click on <li> I when display none div and display table one div
(2 answers)
Closed 2 months ago.
Load div into target from onclick using image nav. Then I want to hide divs that are not active. The 1st div should initially load when page loads. I have searched but can't find a solution.
// JavaScript Document
const mus = document.querySelector("#mus"),
albNav = mus.querySelector(".albnav img"),
/*hideAlbNav = mus.querySelector(""),*/
tunes = mus.querySelector("#tunes"),
gen0Nav = mus.querySelector("img #gen0"),
gen1Nav = mus.querySelector("img #gen1"),
gen0Tunes = mus.querySelector("#tunes .gen0"),
gen1Tunes = mus.querySelector("#tunes .gen1");
/*$(document).on('click', '.menu', function(){
$(this).addClass('active').siblings().removeClass('active')
});*/
tunes.style.display = 'none';
$("albNav").on('click', function() {
$(this).attr('.menu');
$('tunes').hide();
$('tunes').show();
});
<div id="mus">
<div class="albnav">
<img id="gen0" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen1" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen2" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen3" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen4" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen5" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
</div>
<div id="tunes">
<div class="gen0">Gen 0</div>
<div class="gen1">Gen 1</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="js/stQ-plrnav-12-14-22.js"></script> -->
isherwood DID NOT find the solution. The author mim did. isherwood Please stop editing my post just to save face. The original answer by the author mim is as follows:
No thanks to isherwood, who has deleted his comments..haha, I found the answer from Jakob # When click on <li> I when display none div and display table one div. Here is the solution:
$('.menu').on('click',function(){
$(".hidden[show-hide="+$(this).attr('id')+"]").show();
$(".hidden[show-hide!="+$(this).attr('id')+"]").hide();
});
.albnav {
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
width: 80%;
/*height: auto;*/
border-style:dashed;
border-color: #F431F0;
}
.menu {
position: relative;
width: 14.75%;
object-fit: cover;
max-width: 85px;
height: auto;
vertical-align: middle;
padding: 5px 0 5px 2px;
cursor: pointer;
}
.active, .albnav img:hover {
/*background: rgba(0, 0, 0, 0.8);*/
opacity: 0.8;
}
#tunes {
/*margin-top;: 100px;*/
margin-left: auto;
margin-right: auto;
padding: 5px 20px 5px;
border-style:dashed;
border-color: #EB1215;
}
.hidden:first-of-type {display:block}
.hidden {display:none}
<div class="albnav">
<img id="gen0" class="menu" src="genpx.png"/>
<img id="gen1" class="menu" src="genpx1.png"/>
<img id="gen2" class="menu" src="genpx2.png"/>
<img id="gen3" class="menu" src="genpx3.png"/>
<img id="gen4" class="menu" src="genpx.png"/>
</div>
<div id="tunes">
<div id="tun0" class="hidden" show-hide="gen0">Gen 0</div>
<div id="tun1" class="hidden" show-hide="gen1">Gen 1</div>
<div id="tun2" class="hidden" show-hide="gen2">Gen 2</div>
<div id="tun3" class="hidden" show-hide="gen3">Gen 3</div>
<div id="tun4" class="hidden" show-hide="gen4">Gen 4</div>
</div>
I have a profile image with a text next to it. I'm trying to format it in such a way, that there is a profile image with a text next to it which follows that in a grid format.
I'm not really handy in CSS, so aligning items is not really my thing XD. Any help would be appreciated.
Here's the html code.
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
</div>
</div>
</div>
</div>
Heres the CSS
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
This is how it currently looks
Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.
Please follow below code snippets for reference:
<!DOCTYPE html>
<html>
<head>
<!-- CSS style -->
<style>
.container1 {
display: flex;
}
.container2 {
display: flex;
}
p {
margin-left: 10px;
}
img {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Someone followed you </p>
</div>
<div class="container2">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Me followed you </p>
</div>
</body>
</html>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
If i undesrtand you correctly:
.card-body {
display: grid;
justify-items: center;
}
.contents {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1em;
}
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Me followed you</i>
</div>
</div>
</div>
</div>
I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}
slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>
I have set up 3 divs, one on the left and two on the right on top of each other.
I want the 'onclick' to make the div on the left slide out from the left
and one of divs on the right-top to go up and the one on the right-bottom to slide in from the right.
After that animations are finished I want the next time I press the 'onclick' button to do the same to the next divs (with different content) to come in from the points the previous divs came.
I've managed to change the background color of the div's but not the content and animations.
This is what I've gotten so far.
$(document).ready(function(){
$('#next').click(function(){
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function(){
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});
html,body,section{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,#prev{
position:fixed;
z-index:101;
}
#next{
right:0px;
}
#prev{
left:0px;
}
#t1{
float:left;
height:100%;
width:43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1{
color: white;
}
#logo >h3{
width: 58%;
margin: 0 auto;
}
#t2,#t3{
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3{
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2{
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img{
margin-top: 11%;
}
#logo{
margin-top: 40%;
}
#t3>ul{
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li{
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img{
width: 53%;
margin-top: 25%;
}
#home{
display: none !important;
}
#circle1,#circle2,#circle3{
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1{
background: #32325f;
}
#circle2{
background: white;
}
#circle3{
background: #ef9d34;
}
.active{
display:initial !important;
z-index:100;
}
#case{
display:none;
position:absolute;
top:0px;
height: 100%;
width: 100%;
z-index:99;
}
.stern1{
background:blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>
<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
have a look at this simple tutorial, its worked fine for me and you can add / improve it as well.
simple javascript slideshow
I am working on building a website and below is my desired outcome.
Desired: http://i.stack.imgur.com/JI7tQ.png
Note: there is an image on the left making it 5 images in total.
However when I resize the broswer the grid-images stack together like so..
Actual: http://i.stack.imgur.com/tNSLP.png
Below is my code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RM</title>
<meta charset="utf-8"
<meta name= "viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/custom.css" >
</head>
<body>
<div class="container">
<div class="port">
<div id="vertical-title" class="column-1">
<img src="http://www.placehold.it/60x650" >
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive">
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive" >
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
</html>
CSS CODE
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
div#vertical-title{
display: block;
float: left;
margin-left:0%;
}
img.img-responsive {
display: inline;
max-width: 75%;
height: auto;
}
.column-1 {
display: inline;
max-width:5%;
}
.row-1 .container{
display : inline;
max-width: 95%;
}
img.row-1{
display:inline;
max-width:100%;
}
#media (min-width: 500px) {
div.test h1{
color:blue;
}
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
img.inline-div {
width : 25%;
}
}
Desired Behavior
I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.
Also I would like the left most image to have the height equal to the height of the screen.
Note The images are responsive when they are stacked together.
Questions
What is the best way to achieve this behavior ?
My gut is screaming JavaScript.
I cleaned up your code with more reusable and responsive one.
Here's the JsFiddle demo link.
HTML
<div class="container">
<h3>Welcome</h3>
<div class="port">
<div id="vertical-title" class="col-left">
<img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
</div>
<div class="col-right">
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
CSS
h3 {
color: blue;
margin: 5px;
}
.row {
width: 100%;
}
.img-responsive {
width: 100%;
}
.col-left {
max-width: 60px;
float: left;
}
.col-right {
max-width: calc(100% - 60px);
float: left;
}
.col-half {
width: 49%;
margin-left: 4px;
float: left;
}
#media (max-width: 500px) {
.col-half {
width: 100%;
}
}
Hope it helps.
Do you need images to be stacked in iPhone? You can add a media query
#media only screen
and (min-device-width : 568px) { img.img-responsive {
max-width: 49%;
}}
So in iPhone it will stack up and in other it will display the desired effect
Thanks to #iam-decoder for this answer.
All I had to do was change img.img-responsive to
img.img-responsive {
display: inline;
max-width: 40%;
height: auto;
}
Thanks to all the took time to respond to my question. I am curious however how this is done in JS.