I have some ads I want placing side by side and making all the same size but, whilst float: left works to get them to float left, display: inline-block, which should stack them in a grid side by side, and max-width doesn't.
Tried Css
#media (min-width: 768px){.box-
layout {max-width: 100%; float:
left; display: inline-block;}}
This, as mentioned, floats left but doesn't place side by side or make all the ads the same size. It also throws up a css lint obstruction that float and display can not be used together.
https://adsler.co.uk/find-an-event/
HTML:
<div class="line-layout"
style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data-
longitude="">
<div class="event-
info-row-listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row"><div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div><div class="col-md-4">
<div class="event-title">
<h4>New Cross and
Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date"
<date>2019-05-26</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event-
ticket">#free</div>
</div>
<div class="col-md-3">
</div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img
alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film
Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-
marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
your html and css are quite chaotic.
I made an example how it should be and how it works.
Ps. don't pay attention to
max-width:800px;
thats just for demo purposes.
https://codepen.io/anon/pen/QXWLrg
Hope it helps you out!
Related
I am trying to display 4 similar cards in a grid. I am able to create the columns however the card actions only apply to the first one. (On click, an overlay appears with a 'view details' button and a further description about the product).
On hovering over the other 3 cards, nothing happens. Only the first one works.
<div class="container_grid">
<div class="row">
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What could be the problem?
Link to the full JFiddle https://jsfiddle.net/5yoerguh/1/
The problem is you use id for div, need change it to class
or use this selector $('.col-3 > div').hover(function(){}
https://jsfiddle.net/viethien/2nesgtLy/1/
How could I possibly create four grid blocks with height and width in percentage so it could automatically resize on mobile, below is the image of what i am talking about.
I mean - 4 grid blocks , one big one at the left , and one at the right top, with the remaining two juts below the second grid block, trust me this is how best i can explain this, i would so much love and appreciate your Help.
<div class="the-home-big-grid">
<div class="the-real-big-grid">
<div class="first-big-guy">
<img src="assets/img/7.jpg" class="img-responsive" />
<div class="biggrid-overlay">
<div class="before-big-grid-overlay-content">
</div>
<p class="the-big-grid-overlay-cat">
Web Designing
</p>
<h2 class="biggrid-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-big-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
<div class="secound-big-guy">
<img src="assets/img/2.jpg" class="img-responsive" />
<div class="secound-biggrid-overlay">
<div class="before-secound-grid-overlay-content">
</div>
<p class="the-secound-grid-overlay-cat">
Web Designing
</p>
<h2 class="secound-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-secound-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
<div class="third-big-guy">
<img src="assets/img/1.jpg" class="img-responsive" />
<div class="third-biggrid-overlay">
<div class="before-third-grid-overlay-content">
</div>
<p class="the-third-grid-overlay-cat">
Web Designing
</p>
<h2 class="third-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-third-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
Image
Below is the image of what i meain
Here's Bootply: http://www.bootply.com/JlOEZaBkNs
<div class="row">
<div class="col-xs-6">A
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">B</div>
</div>
<div class="row">
<div class="col-xs-6">C</div>
<div class="col-xs-6">D</div>
</div>
</div>
</div>
This is what I want it to look like:
I am trying to create an html file that has 5 div boxes like the picture shown above. I have the first three done but I am not sure how to do the bottom two. Any help is appreciated
<div class="row divcenter" style="max-width: 1000px;">
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image">
<img src="images/team/1.jpg" alt="ThreatVulnManage">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>Penetration Testing</ul></i>
<i style="color:#fff"><ul>Vulnerability Scans</ul></i>
<i style="color:#fff"><ul>Red/Blue/Purple Team Exercise</ul></i>
<i style="color:#fff"><ul>Black Team</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Threat & Vulnerability Management</h4></div>
</div>
</div>
</div>
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image">
<img src="images/team/2.jpg" alt="EnterpriseRiskCompliance">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff"><ul>IT Security Assessment & Cyber Breach Risk Assessment</ul></i>
<i style="color:#fff"><ul>HIPAA & PCI-DSS</ul></i>
<i style="color:#fff"><ul>Third-Party Vendor Risk Assessment</ul></i>
<i style="color:#fff"><ul>Cloud App Risk Assessment</ul></i>
<i style="color:#fff"><ul>Data Discovery Mapping & Classification</ul></i>
<i style="color:#fff"><ul>Compliance Management</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Enterprise <br>Risk & Compliance</h4></a></div>
</div>
</div>
</div>
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image">
<img src="images/team/3.jpg" alt="SecurityProgramStrategy">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>Infosec Program Development</ul></i>
<i style="color:#fff"><ul>ISO 27002</ul></i>
<i style="color:#fff"><ul>NIST</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Security Program <br>Strategy</h4></div>
</div>
</div>
</div>
</div>
<div class="row divcenter" style="max-width: 1000px;">
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image element-5">
<img src="images/team/1.jpg" alt="Trust">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>T-Score</ul></i>
<i style="color:#fff"><ul>R-Score</ul></i>
<i style="color:#fff"><ul>PNProtect</ul></i>
<i style="color:#fff"><ul>Trust Restoration Framework</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Trust</h4></div>
</div>
</div>
</div>
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image element-4">
<img src="images/team/2.jpg" alt="EducationAwareness">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>Security Awareness Training</ul></i>
<i style="color:#fff"><ul>Secure Code Review Training</ul></i>
<i style="color:#fff"><ul>Human Breach Prevention Project</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Education & Awareness</h4></div>
</div>
</div>
</div>
Hard to say exactly, without knowing how you're structuring your code. If everything is within one container, you could set it's text-align to center and have the elements within it have display: inline-block.
<div class="wrapper">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
</div>
And css:
.wrapper {
text-align: center;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: #777777;
margin: 15px;
}
As long as the children are too wide to all fit on the same row in the wrapper, they'll move on to the next row. Alternatively you can place a <br> element to force them to wrap to a new row or just put them children in separate <div>s
I am very new to coding, and I'm sorry if this suggestion does not help you. I am trying to answer questions so maybe I can learn more myself.
I would do something like this in css:
#boxes {
float: left;
position: relative;
}
.box4 {
clear: left;
}
Then edit the margin accordingly.
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
This is driving me nuts....as per this page http://kudosoo.com/twofolio.html
there is an issue with the left nav working correctly.The top part of the menu disappears upon loading. I've tried adjusting the css and html in different ways to solve this but nothing has worked to date.
I believe its linked to the either the #container or how the drop dwon menu is showing on the page, seems to be sitting on top of the menu.
Any help is gratefully received.
Main page code is below. Example page is here
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="all-elements">
<div id="sidebar" class="page-sidebar">
<div class="page-sidebar-scroll">
<div class="sidebar-controls">
</div>
<div class="sidebar-header">
<img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img">
<h4 class="center-text">kudosoo</h4>
<em class="center-text">Get badged today</em>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Navigation</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items"></div>
<div class="nav-item">
Home<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Activity<em></em>
<div class="nav-item-submenu active-submenu">
<div class="sidebar-decoration"></div>
Received <em class="unselected-sub-nav"></em>
Awarded <em class="unselected-sub-nav"></em>
Friends <em class="unselected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Select Badge<em class="dropdown-nav"></em>
<div class="nav-item-submenu">
<div class="sidebar-decoration"></div>
Wide item Portfolio <em class="selected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
My Profile<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Let's get social!</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items">
<div class="nav-item">
Facebook<em class="link-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Twitter<em class="link-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<p class="sidebar-copyright center-text">Copyright 2014.
<br>All rights reserved.</p>
</div>
</div>
<div id="content" class="page-content">
<div class="content-controls solid-color fixed-header">
<em class="content-title">Who's getting Kudosoo today?!</em>
LogOut
</div>
<div class="fixed-header-clear"></div>
<!---HTML code not to change ends-->
<div class="content">
<div id="container">
</div>
<!--Search options to find firends, requests and rejections-->
<div id="friendsfilter">
<form id="friendsfilter">
<div class="error" style="display:none"></div>
<div class="form-group">
<div class="input-group input-group-hg input-group-rounded">
<span class="input-group-btn">
<button id="find_button" type="button" class="btn"><span class="fui-search"></span>
</button>
</span>
<input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" />
</div>
</div>
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends">
<option value="0">Click to manage friend connections</option>
<option value="f_connected">Friends</option>
<option value="f_requests">Requests</option>
<option value="f_rejected">Declined</option>
<option value="f_sent">Sent</option>
</select>
<div id="FriendsConnected"></div>
<div id="FriendsPending"></div>
<div id="FriendsRejected"></div>
<div id="FriendsSent"></div>
</form>
</div>
<!--Friends profile info and stats-->
<div id="container friendsProfile">
<form>
<div class="error" style="display:none"></div>
<button id="friendsProfile" class="button button-red">Unfriend</button>
</form>
</div>
<!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->
<div id="container">
<img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image">
<div id="userimgs"></div>
</div>
<div id="container" class="container no-bottom">
<!---List of connected friends is generated from script below, the different divs split the results depending which button is clicked-->
<div id="containerFriends"></div>
<div id="containerFriendsPending"></div>
<div id="containerFriendsRejected"></div>
<div id="containerFriendsRequestSent"></div>
<div id="containerFriendsConnected"></div>
<div id="containerFriendsProfile"></div>
</div>
<!--Displays friends uploaded badges after the user clicks on their profile picture-->
<div id="container">
<div id="badgeimgs"></div>
</div>
</div>
</div>
</div>
</div>
<!--Footer stuff-->
<div class="container">
<div type="button" id="decline" class="btn btn-danger mrs"></div>
<div class="footer-socials">
</div>
<p class="copyright uppercase center-text no-bottom">Copyright 2014
<br>All rights reserved</p>
</div>
<div style="height:350px"></div>
</div>
</div>
So, as I can see it.. really, the navigation shouldn't be showing at all when the page is loaded, correct? As the navigation is shown when the main page content is slid to the right?
z-index is used to order the layers of divs in HTML. The higher the number, the more 'forward' it will be placed on the page (back to front).
Currently, your <div id="content"> has a z-index of 10, whilst your <div id="sidebar"> has a z-index of 2.
This means your Content div will be placed infront of your Sidebar div, causing the top of the sidebar to be hidden.
Changing these values in your CSS file will change the order.
.page-content is on line 9 of your style.css file
.page-sidebar is on line 25 of your style.css file
i think in line 135 you closed the div wrong
remove closing div from line 135 and place in the end of side bar code at line 162
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
Make the Z-index of your sidebar to 11. Your page content has z-index of 10
<div id="sidebar" style="z-index:11" class="page-sidebar">
I actually resolved this by adjusting <div style="height:350px"></div> to
<div style="height:3350px"></div> worked. The menu now works as expected. Not shown when the page loads, but shown in full when the button is clicked to display it.