I just began building a website, to make it short:
I'm making a deadly simple dropdown menu which isnt working out.
To make it short, i gave every element a background color.
I would like to know why the boxes behave like that, they
have all their own sizes. The grey one is wider than it should be.
Also the float:right doesnt seem to work on both elements the same. One is further away than the other, they should all be positioned to the right border.
The red border should disappear also:
#dropdown{
display:block;
float:right;
background:#666;
width:120px;
}
#logo-type{
height:90px;
background-image:url("https://picload.org/image/rgrwoopr/logo_font.jpg");
width:90px;
background-color:green;
float:right;
}
#dropdown ul{
margin-top:91px;
background-color:red;
width:120px;
}
#dropdown ul li{
font-size:12px;
width:120px;
height:40px;
background-color:black;
list-style:none;
text-align:center;
}
#dropdown ul li a{
color:white;
text-decoration:none;
}
#dropdown ul li a:hover{
text-decoration:none;
}
#dropdown ul li:hover{
background-color:#0C6;
}
<div id="dropdown">
<a id="logo-type" href="#"></a>
<ul>
<li>DELUXETRAVEL</li>
<li>BLOG</li>
<li>PREMIUM CLUB</li>
</ul>
</div>
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
So here is a picture reference for this question:
What I would like to do is, using flexbox layout 3 columns (left side bar, center content, *optional right side bar). Basically, you have the 3 columns but only show the left side bar and content columns normally. Then, when the user clicks the menu button, have the right side bar content come into view (as shown by the red part in the drawing).
I figured the parent container to start would look something like:
body {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
}
What else would be needed (especially for the right side push in sidebar) to get this working with flexbox?
You are so close.
In order to make the content column grow when the right sidebar is hidden, you need a positive flex-grow on it.
And in order to make the body cover all the screen, remove its margin and use height: 100% on both html and body.
Here is a working example:
document.querySelector('button').addEventListener('click', function() {
document.getElementById('right').classList.toggle('hidden');
});
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-flow: row nowrap;
}
.sidebar {
width: 25%;
background: #777;
}
#content {
flex-grow: 1;
background: #000;
}
.hidden {
display: none;
}
<div id="left" class="sidebar"></div>
<div id="content">
<button type="button">Toggle sidebar</button>
</div>
<div id="right" class="sidebar hidden"></div>
Usually I vertically center a button, inside an absolute positioned div with top:50%, and margin-left:-(height/2), but today I realised it's not perfect, or I don't know how to use it correctly.
For example I did 2 examples. In the first example the <a> tag is an inline element, in the second example it's a block element. The positioning with block element is perfect, but unfortunately the width is 100%.
Please explain that why is the second example works well, with display:block;?
I'm really interested in your cross browser solution. How do you do this simple stuff?
Here is my css:
.container {
height:240px;
position:relative;
}
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
}
#example2 { left: 250px; }
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
position:relative;
top:50%;
margin-top:-17px;
}
#example2 .btn { display:block; }
..and html
<div class="container">
<div id="example1" class="box">
button
</div>
<div id="example2" class="box">
button
</div>
</div>
The online version is available at http://jsfiddle.net/79hqgabq/2/
The alignment issue you see is being caused by the margin-top: -17px line as seen by this updated fiddle with that line removed on the .btn class: Updated Demo
On another note, vertical alignment is notoriously problematic with old CSS selectors, and it would be a good idea to transition over to Flexbox unless you needed to support older browsers.
Here's your problem with the new display: flex selector and corresponding sub-selectors: Demo w/ Flexbox. This removes the emphasis on having to pixel fudge to get proper vertical alignment.
New .box class
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
/* New lines for alignment */
display: flex;
align-items: center;
justify-content: center;
}
New .btn class (just removed the old tags)
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
}
EDIT: After researching block elements have the property to expand to 100% of the parent container. This can be explained in more detail here. This is why display:block div expands until it reaches the padding on the .box class.
To answer why the display: inline-block element is slightly misaligned is because by default it is aligned on the baseline. See here for reference. Changing the vertical alignment of the div to be vertical-align: top will fix this.
Here is the new fiddle that uses all your previous syntax just with the added vertical-align: middle property.
I have a footer with dynamic content & height, so i'm using the display:table version of sticky footer. The problem is I have a menu with an absolute positioned drop-down that extends past the footer if the page is too small, menu too big, etc. This creates a gap below the footer. Check out the fiddle for an example. Thanks.
http://jsfiddle.net/wmTn9/
Here's the css, although its easier to see in the fiddle.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
height: 100%;
background: turquoise;
position:relative;
}
.menu {
position:absolute;
left:0;
width:50%;
background:yellow;
overflow:hidden;
max-height:20px;
}
.menu:hover {
max-height:1000px;
}
.menu li {
height:800px
}
.footer {
display: table-row;
background: lightgray;
}
.footer:hover h3 {
height:300px;
}
In your CSS, take position:absolute; out of the menu class and the footer will move down to accommodate the long menu. If you want the footer to remain at the bottom of the browser window, add the following into your footer class...
width:100%;
position:fixed;
bottom:0;
position:absolute; takes the element out of the document flow. The element is then positioned relative to its first positioned (not static) ancestor element. Taking it out of the menu class puts the menu back into the document flow and stops the menu overlapping the footer.
Amended Fiddle with footer stuck to the bottom of the browser window
I'm doing some tests on a website using Wordpress as a CMS. In the example below the top left of the page has an "S" graphic outside of the main content area, clipped accordingly depending on the browser width. I would like to do something similar with an "L" graphic to the right in the footer.
The page width is set to 960px, and I've made the footer container DIV 1088px so that the "L" appears outside the content area. The trouble is this makes a scrollbar appear when it exceeds the current width of the browser.
I've tried overflow:hidden on the footer container DIV but this doesn't seem to work. I've also tried overflow:hidden on the BODY element and this works ok in IE, but not in other browsers.
Example: http://unclemort.com/wp/
I really hope there is away to do this, any help gratefully received.
I was trying to figure this out myself today and stumbled upon the answer.
What you need is a surrounding element around everything that has this:
#wrapper {
min-width: 600px; //whatever width you want
overflow-x: hidden;
}
Your main content should have that same width, and the things that need to jut out should have a negative margin.
Here's a complete example:
HTML:
<div id="outer">
<div id="container">
<div class="row">
<div class="inner">Hello World</div>
</div>
</div>
</div>
CSS:
#outer {
min-width: 300px;
overflow-x: hidden;
}
#container {
width: 300px;
margin: 0px auto;
background: gray;
height: 500px;
}
.row {
width: 350px;
background: blue;
margin-left: -25px;
}
.inner {
background: yellow;
margin-left: 25px;
width: 300px;
height: 100px;
}
#media screen and (min-width: 301px) {
body {
//overflow-x: hidden;
}
}
jsfiddle:
http://jsfiddle.net/aaronjensen/9szhN/
Try in style.css, line 65, adding:
#footer-container {
border: none;
overflow: hidden;
}
Explanation:
#footer-container #footer {
background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left;
width: 1088px;
height: 217px;
overflow: hidden;
}
The scrollbar you're hiding is effectively not there.
The scrollbar you're seing is another one.
The problem is that the footer is 1088px wide, and that's causing a scrollbar to appear.
As long as the footer has fixed width and it's parent doesn't have overflow: hidden, you'll get a scroll if there's not enough width for the footer to fit.
Same goes for any other container.