I have a menu that works on large screens but when the browser size is reduced in width (and the menu wraps) I can't get the menu items not to overlap each other.
HTML:
<div style="padding-top: 10px">
<a class="menu" style=
"border: #B1B1B1 solid; border-width: 0px 1px 0px 1px" href="#">Design
and Install</a><a class="menu" href="#">About this site</a><a class=
"menu" href="#">Products</a><a class="menu" href="#">F A Q</a><a class=
"menu" href="#">Portfolio</a><a class="menu" href="#">Contact</a>
</div>
CSS:
.menu {
font-family: Verdana;
font-size: 12px;
color: #000;
text-align: center;
text-decoration: none;
border: #B1B1B1 solid;
border-width: 0 1px 0 0;
padding: 10px 17px 10px 12px;
}
.menu:link,.menu:visited {
background-color: #E5E5E5;
}
.menu:hover,.menu:active {
background-color: #F9C232;
}
http://jsfiddle.net/9j77E/1/
Thanks if you can help.
Try adding display: inline-block; to .menu
.menu {
font-family:Verdana;
font-size: 12px;
color: #000000;
text-align: center;
text-decoration: none;
border: #B1B1B1 solid;
border-width: 0px 1px 0px 0px;
padding: 10px 17px 10px 12px;
display:inline-block;
}
display:inline-block; this property added and tested, please check.
Also if I'm too late you could also set line-height to 32. Because your font-size is 12px plus 2 times 10px padding.
Related
I have a code in php to show the breadcrumb it outputs like this
the link i found the php code
output
<div id="crumbs">Home » About The Tests » <span class="current">Page Image Alignment</span></div>
and it looks like this
#crumbs a,
#crumbs span {
border-radius: 0px 10px 10px 0px;
box-shadow: -3px 2px 18px -3px #000;
background: #4489ff;
width: max-content;
display: inline-block;
color: white;
font-size: 17px;
padding: 6px;
font-weight: bolder;
margin-left: -1px;
margin-top: 1rem;
text-decoration: none;
}
#crumbs span.current{
background: #eef5ff !important;
color: black !important;
}
<center>
<!-- Do Not use <center> tag ! !-->
<div id="crumbs">Home About The Tests <span class="current">Page Image Alignment</span></div>
<!-- Do Not use </center> tag ! !-->
</center>
i want to make the breadcrumbs a single line and fancy like this .
i have made 90% percent of it but i don't know how to show the box shadow like the image down
Please tell how to. thanks for your help !
image desktop
image mobile
EDIT: I removed the absolute positioning method, centered it and made it responsive.
.crumbswrapper {text-align: center;}
#crumbs {
text-align: left;
display: inline-block;
font-family: roboto;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 12px;
}
.innerwrap {
display: inline-block;
background:#4489ff;
padding-right: 10px;
margin: 0 0 0 -5px;
}
.innerwrap:last-child {
background: none;
}
.innerwrap:nth-last-child(2) {
background: #eef5ff;
}
#crumbs a, #crumbs span {
background:#4489ff;
border-radius: 0 20px 20px 0;
box-shadow: 5px 0 10px -4px #444;
color: white;
padding: 10px 25px 10px 20px;
text-decoration: none;
white-space: nowrap;
line-height: 34px;
}
.innerwrap:nth-last-child(2) a {
box-shadow: none!important;
}
#crumbs span.current{
background: #eef5ff !important;
box-shadow: none!important;
white-space: nowrap;
color: #4489ff!important;
}
<div class="crumbswrapper">
<div id="crumbs">
<div class="innerwrap">Home</div>
<div class="innerwrap">About The Tests</div>
<div class="innerwrap"><span class="current">Page Image Alignment</span></div>
</div>
</div>
I uploaded a video here : https://streamable.com/uyddy
I am asking if I can somehow hide the horizontal scrollbar in that specific div, while still being able to scroll? I want to achieve this on mobile devices.
I attached the code here :
https://codepen.io/UrsuGrizzly/full/aVRZyg/
https://jsfiddle.net/o2ucuorL/
<div id="bottom">
All
Images
Videos
News
Maps
<a id="books" href="#">Books</a>
<a id="flights" href="#">Flights</a>
<a id="personal" href="#">Personal</a>
<a id="stools" href="#">Search tools</a>
<a id="moar" href="#">More</a>
Settings
<a href="#" id="tools">Tools</a
</div>
body{
font-family: arial,sans-serif;
font-size: 13px;
}
#bottom{
grid-area: 2/1/3/3;
display: flex;
overflow-x:scroll;
}
#bottom a{
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
color: rgba(0,0,0,0.54);
padding: 14px 16px 12px 16px;
}
#bottom #stools{
border-left: 1px solid rgba(0,0,0,.12);
padding: 14px 16px 12px 24px;
white-space:nowrap;
}
#bottom #all{
color: #4285f4;
border-bottom: 2px solid #4285f4;
}
what I'd do is just to wrap the #bottom div inside a parent div with a fixed height and the overflow property set to hidden. Then you just have to give the #bottom div a padding-bottom with the same height as the scrollbar has (like 10px more or less). And thats all :), works great. Leave here the code:
// HTML Part
<div class="container">
<div id="bottom">
All
Images
Videos
News
Maps
<a id="books" href="#">Books</a>
<a id="flights" href="#">Flights</a>
<a id="personal" href="#">Personal</a>
<a id="stools" href="#">Search tools</a>
<a id="moar" href="#">More</a>
Settings
Tools
</div>
</div>
// CSS Part
body {
padding: 0;
margin: 0;
font-family: arial,sans-serif;
font-size: 13px;
}
.container {
height: 43px;
width: 100%;
overflow: hidden;
}
#bottom {
grid-area: 2/1/3/3;
display: flex;
overflow-x: scroll;
padding-bottom: 10px;
}
#bottom a {
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
color: #0000008a;
padding: 14px 16px 12px 16px;
white-space: nowrap;
}
#bottom a#all {
color: #4285f4;
border-bottom: 2px solid #4285f4;
}
I might be missing something basic. It's so simple:
.items {
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
jsFiddle
Moving the class from the anchor to the div will make it (the border) disappear all together.
Well, your <a class="lamgswitch"> does not have any content... The float: left; makes the <div class="items">float out of it...
So try to remove it, and replace it with display: inline-block;, as the div is a block component, and you placed it inside an inline component (a)...
.items {
display: inline-block;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
Place the <a> tag inside the <div> rather than the other way around.
.items{
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px ;
}
.langswitch{
border: 3px solid #86D1DA;
border-radius: 5px;
}
<div class="items">Italiano</div>
Hope this helps.
Technically, placing the <a> inside the <div> is the semantically correct way to do this as described in the other answer.
If you really HAVE to do it this way, you need to change the display of the <a> tag from inline to inline-block.
I currently have 4 Divs, each of which contains a hyperlink. Each hyperlink is a member of the navigation bar at the top of a website. The rightmost link must line up with elements below it. I should be able take a vertical line ruler and see the rightmost elements align at the right-most edge of the page.
My rendered HTML looks great in Chrome, but not in FireFox, or IE: the links are not as wide and the page looks weird because the fourth link doesn't hit the right edge of the page.
I believe this has to do with font width definitions, however I do not know what to manually set.
FireFox CSS Computed Text:
font-family Lucida Sans Unicode
font-size 16px
font-weight 600
font-style normal
font-size-adjust none
color #EEFFFF
text-transform none
text-decoration none
letter-spacing normal
word-spacing 0
line-height 23px
text-align start
vertical-align baseline
direction ltr
-moz-tab-size 8
-moz-font-feature-settings normal
-moz-font-language-override normal
-moz-text-blink none
-moz-text-decoration-color #EEFFFF
-moz-text-decoration-line none
-moz-text-decoration-style solid
text-overflow clip
Chrome Computed Style:
background-attachment: scroll;
background-clip: border-box;
background-color: #D00;
background-image: none;
background-origin: padding-box;
border-bottom-color: #B00;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #B00;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #B00;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #B00;
border-top-style: solid;
border-top-width: 1px;
color: white;
cursor: auto;
display: inline;
float: none;
font-family: 'Lucida Sans Unicode';
font-size: 16px;
font-weight: 600;
height: auto;
line-height: 23px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 17px;
padding-left: 10px;
padding-right: 10px;
padding-top: 17px;
text-decoration: none;
width: auto;
---Append---
<div id="LinkContainer">
<div class="Link">
Variable Length Text A
</div>
<div class="Link">
Variable B
</div>
<div class="Link">
Variable Length Text C Really Long
</div>
<div class="Link">
Var D
</div>
</div>
#LinkContainer
{
position:absolute;
float: left;
margin-top:165px;
margin-bottom:5px;
margin-left:225px;
width:680px;
}
.Link
{
float:left;
margin: 0px 1px 0px 1px;
padding: 00px 0px 20px 0px;
color: #EFF;
font-weight:600;
font-family:Lucida Sans Unicode;
font-size: 16px;
}
.mnu-hover
{
background: #C00;
text-decoration: none; /* color: #FFF; */;
border: solid 1px #B00;
padding: 15px 10px 15px 10px;
margin: 0 0 0 0;
color: #EEE;
}
.mnu-hover:hover
{
background: #D00;
border: solid 1px #B00;
padding: 17px 10px 17px 10px;
color: #FFF;
}
This isn't something you can fix. If the text has to look perfect in every browser on every OS, use an image.
<ul id="LinkContainer">
<li class="=Link">
Variable Length Text A
</li>
<li class="=Link">
Variable B
</li>
<li class="=Link">
Variable Length Text C Really Long
</li>
<li class="=Link">
Var D
</li>
</ul>
.Link a {
background-image:url(title_sprite.png);
background-repeat:no-repeat;
height:40px;
text-indent:-999em;
}
.Link a.var_a {
background-repeat:no-repeat;
background-position:0 0;
width:200px;
}
.Link a.var_b {
background-repeat:no-repeat;
background-position:0 -45px;
width:150px;
}
.Link a.var_c {
background-repeat:no-repeat;
background-position:0 -90px;
width:75px;
}
.Link a.var_d {
background-repeat:no-repeat;
background-position:0 -135px;
width:90px;
}
My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.
The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.
Here are some screencaps
Here is a link to the test page: testsite
And here is the code:
<?php include("includes/header.html");?>
<div id="content">
<div id="toolbar" class="dropshadow" style="background-color: #181818">
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
<hr noshade color = "#373737"/>
<ul>
<li>
<a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
<img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
<h3>Our Vehicles</h3>
</a>
</li>
<li>
<a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
<img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
<h3>Shipping</h3>
</a>
</li>
<li>
<a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
<img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
<h3>Financing</h3>
</a>
</li>
<li>
<a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
<img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
<h3>Insurance</h3>
</a>
</li>
<li>
<a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
<img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
<h3>Auto Locator</h3>
</a>
</li>
</ul>
</div>
<div id="searchbox" class="dropshadow">
</div>
<div id="advsearch" class="dropshadow">
</div>
<div id="links" class="dropshadow" style="background-color: #181818">
</div>
</div>
</div>
<div id="bannerads" class="dropshadow">
</div>
Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.
#charset "utf-8";
/* CSS Document */
#bannerads{
margin: 9px 0px 5px 6px;
float: left;
width: 728px;
height: 90px;
padding: 6px 128px;
background-color: #e9e7e4;
}
#toolbar{
float: left;
width: 984px;
height: 150px;
position: relative;
z-index: 1;
margin: 0px 6px 0px 6px;
background-color: #181818;
background-image: url(../images/toolbar.png);
background-position:right top;
background-repeat:no-repeat;
}
#toolbar hr{
float: left;
width: 600px;
margin: 4px 300px 0px 30px
}
#toolbar ul{
list-style:none;
padding:0;
}
#toolbar li{
float: left;
margin: 10px 0px 0px 31px;
}
#toolbar a{
color: #e9e7e4;
}
#toolbar a:hover{
color:#e9e7e4;
text-decoration:underline;
}
#searchbox{
float: left;
clear: both;
width: 446px;
height: 402px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#toolbar li h3{
color: #e9e7e4;
font-size: 13px;
margin-top: 4px;
margin-bottom: 10px;
text-align:center;
}
#advsearch{
float: left;
width: 446px;
height: 242px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#links{
float: left;
width: 446px;
height: 132px;
background-color: #181818;
margin: 8px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#arrow{
margin-left:-93px;
width: 68px;
height: 135px;
float: left;
position: relative;
}
.header1{
color: #e9e7e4;
font-size: 28px;
margin: 8px 0px 0px 30px;
float: left;
}
.header2{
color: #e9e7e4;
font-size: 16px;
float:left;
margin: 22px 0px 0px 220px;
}
#showinvheader{
color: #e9e7e4;
font-size: 14px;
margin-bottom: -2px;
text-align:center;
}
Lastly, here is the css sheet I'm using for compatibility with ie:
/* CSS Document */
.Navigation{
border: solid #181818 1px;
margin: -15px 5px 0px 5px;
}
.bigbox{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
.smallbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#banner{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#headerimg{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#contentbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads2{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#toolbar{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#featured{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#searchbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#advsearch{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#links{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.
If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.
Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php
Ok, sorry it took so long for me to write this...
The reason the code was malfunctioning was that a header tag didn't get closed.
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
So, if you're experiencing a similar problem make sure your tags are all closed.