How to style my drop down menu? - css

I have followed a tutorial to build my own drop down menu. Im having problem to style my submenus. Can't find the right class to change it. want the sub menus to come under in one line and in a box.
Can anyone help me?

This is how I do my dropdowns, a bit modified to look more like yours, and you may need to modify it to suite your needs. You can take this code, place it in a text file, and open it with a browser. It should work fine. Also, personally, I don't like using tables or lists for menus but this is just personal preference. Here you go - pure HTML and CSS:
<style>
body { margin: auto; }
.menu
{
position: relative;
background: gray;
height: 40px;
}
.menuItem, .dropdownItem
{
position: relative;
float: left;
width: 150px;
color: black;
}
.menuItem:hover, .dropdownItem:hover
{
background: black;
color: white;
}
.menuItem
{
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.dropdownItem
{
height: 100%;
line-height: 40px;
}
.dropdown
{
position: absolute;
top: -1000px;
width: 450px;
background: gray;
height: 40px;
}
.menuItem:hover .dropdown { top: 100%; }
</style>
<div class="menu">
<div class="menuItem">
Build New
<div class="dropdown">
<div class="dropdownItem">
Bath
</div>
<div class="dropdownItem">
Bathroom Lightning
</div>
<div class="dropdownItem">
Bathroom Faucet
</div>
</div>
</div>
<div class="menuItem">
Construction Of
</div>
<div class="menuItem">
Renovating
</div>
</div>
I hope that this helps.

Related

How can I pin a div to always appear at the bottom of a page, no matter the content length?

I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;

Displaying 1 text box and 3 images on the same row

Was wondering if i can display 1 text box and 3 images on the same row? All the images are the same size. If possible aswell i'd ideally like a some text underneath each image aswell?
heres the code:
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
.row {
display: inline;
float: left;
}
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
}
.side-bar h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 5px;
}
.side-bar p {
font-size: 14px;
}
.side-bar a {
font-size: 13px;
}
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Ive searched the internet but no luck as yet.
thanks in advance.
There are a number of ways to do this, one example is to float the two child elements:
.side-bar, .recent-wrap {
float: left;
}
This will only work if there is enough room on the parent element for the .side-bar and .recent-wrap to sit next to each other.
Example: http://jsbin.com/poxox/1/edit
CSS:
.row {
width: 250px
}
http://jsfiddle.net/3DCSd/
Here Is a working Fiddle
.row {
display: inline-block; /* changed to inline-block, you don't need
inline and float */
}
.recent-wrap a { /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
The rest of the CSS stayed the same
and HTML I just added the text box
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<input type="text" id="ss" />
<img src="img/body-metrix.png"/>
<img src="img/body-metrix-logo.png"/>
<img src="img/market.png"/>
</div>
</div>
Try this:
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
float: left; /* added */
}
.recent-wrap {
margin-left: 270px; /* added (padding + width) of side-bar */
}
Working Fiddle
This approach let the second container stay in line with the first container even if the window size is small.
Here is the sample with textboxes below image: example

External CSS not being applied

I try to use stack as a last resort to figuring out my coding problems but I can't find what is wrong with this stupid website. I am building the mobile site for a company right now and I am doing it through 2 separate style sheets so that when a user is on a device smaller than a specified resolution, it uses a different style sheet. I've done all of this no problem.
My problem is that some of the css styling in my external doc is not being applied to the respective elements in the HTML doc. More specifically, none of the ".fb a", ".tw a", and ".in a" are not being applied at all. When I apply them inline in the html document it works but I need it to be in the external style sheet. And I cannot figure out why this is happening. Since the background-image is not being applied, nothing shows up. What is weirder is that other elements of the footer display properly and when I change the styling, it is reflected on the site. Please help!!!
My HTML:
<!-- FOOTER -->
<div class="footwrap">
<div class="footer">
<!-- CONTACT -->
<div class="text">
<!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
</div>
<!-- SOCIAL NETWORKING -->
<div class="sn">
<a href="http://www.facebook.com/obliquedrive">
<div class="fb">
</div>
</a>
<a href="http://www.twitter.com/obliquedrive">
<div class="tw">
</div>
</a>
<a href="http://www.linkedin.com">
<div class="in">
</div>
</a>
</div>
</div>
</div>
And my CSS:
/*Footer*/
.footwrap {
width: 100%;
height: 175px;
background-color: #444;
}
.footer {
width: 90%;
margin: auto;
height: 175px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 420px;
margin: auto;
height: 175px;
font-size: 24px;
margin-top: 20px;
text-align: left;
float: left;
}
.sn {
width: 400px;
float: right;
margin-top: 30px;
margin-right: 50px;
display: block;
}
.fb {
width: 75px;
height: 75px;
display: inline-block;
}
.fb a {
display: block;
width: 100px;
height: 100px;
background-image: url(images/sniconsm.jpg) !important;
background-position: 0px 0px !important;
}
.tw {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.tw a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 150px 0px;
}
.in {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.in a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 75px 0px;
}
.footer .text {
position: relative;
display: inline-block;
margin-left: 50px;
margin-top: 15px;
float: left;
line-height: 170%;
color: #ffffff;
}
Also, here is the page live, with all of the code if it helps:
http://thewolv.es/Oblique%20Drive/mobile
Please just ignore any other problems you see lol
Look a little more closely at your styles. You have .fb a, but the HTML markup is the other way around:
<a href="http://www.facebook.com/obliquedrive">
<div class="fb"></div>
</a>
If you were trying to target the div, you should use a .fb. But really, you might not need those divs at all. Just change your A tag to something like:
Then use the CSS selector that is a.fb (no space between them).
Your A elements are not children of the divs, it's the other way around.. yet your CSS defines the A elements as children.

Cant get my divs positioned correctly

Honestly - CSS and Divs aint the thing i'm most familiar with. However, I thought that I had managed to make the template for my later design, but it turns out that everything tends to move a bit around for me..
In Chrome, things seems to work at first, but after refreshing a few times, the text "your position on page" jumps down to the next line. In firefox, things are just at the wrong places to begin with.
If possibly, I would also like a nod on, how to get a padding/margin between the position text and again between each line. When adding it now, it just moves everything to completely wrong places.
Demo: http://cityroast.dk
CSS:
section {
width: 100%;
height: 100%;
background: #e8ebef;
padding: 5px;
}
div#catcontainer {
width: 10%;
height: 100%;
float: left;
}
div#categories {
width: 100%;
height: 100%;
float: left;
}
div#ads {
width: 100%;
height: 100%
float: left;
display: box;
}
div#ads span {
font-family: Verdana;
font-size: 12;
text-align: left;
}
div#one {
width: 10%;
height: 80px;
float: left;
}
div#two {
width: 70%;
height: 80px;
background: aqua;
float: left;
text-align: center;
}
div#three {
width: 10%;
height: 80px;
background: red;
float: left;
text-align: right;
line-height: 80px;
}
div a {
text-decoration: none;
color: #000000;
font-family: Verdana;
font-size: 12px;
}
HTML:
<section>
<div id="catcontainer">
<div id="categories">
<ul>
<b>A menu</b>
<li>Something</li>
<li>Something2</li>
<li>Something3</li>
</ul>
</div>
</div>
<div id="ads">
<span>Your position on page</span>
<div id="one">A picture</div>
<div id="two"><b>Title</b></div>
<div id="three"><b>Details</b></div>
</div>
</section>
Obviously, the latter part of the code is echoed 5 times at the moment, to get the 5 lines.
Thanks already!

CSS problem, creating tabs

I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.

Resources