So, I got set of links set up like this. Apologies for bad names, but to keep it easy to understand, I chose to not to use real paths/names. However, all paths check out in when page is shown/used.
<nav>
<div class="center">
<img src="folder/image1.gif" alt="">
<img src="folder/image2.gif" alt="">
<img src="folder/image3.gif" alt="">
</div>
</nav>
Now, I want each image stick to each other, so that they form a one long bar. With the current set up, they all line up in the middle of the page in one row. However... there are spaces in between each. Here is the CSS:
.center {
margin: 0 auto;
text-align: center;
display: block;
}
a.navigointi
{
float:left;
margin: 0px;
padding: 0px;
}
img.navigointi
{
margin: 0px;
padding: 0px;
border: 0px;
}
However, if I designate images as navigointi class... they do stick together, forming a one long bar, but at the same time, it breaks the centering. All images float to left side of the screen. Even if I remove all content from the img.navigointi, so it becomes empty style, it still remains the same. If I don't give the images a class, they return to the middle, but once again with the spaces in between them.
Any idea what is causing the centering to break?
Here's a FIDDLE.
The line that removes the single space between the anchors is font-size: 0px;
(found on CSS-Tricks)
CSS
.center {
margin: 10px auto;
text-align: center;
display: block;
border: 1px solid black;
font-size: 0px;
}
.navigointi{
margin-left: 0px;
padding: 0px;
}
img
{
margin-left: 0px;
padding: 0px;
border: 1px solid red;
}
If I understand, you should use display: inline instead of float: left.
Here an example : http://jsfiddle.net/YTn2b/
Related
I have a navgiation menu with a logotype, a correpsonding name, a vertical border as a separator, as well as the actual navigation links. While the logotype and correpsonding name seem to be properly aligned, the vertical border and the navigation links are not. Instead, they are off by 5 or so pixels (i checked in Photoshop).
My question is: How do I make sure that all the navigation elements are aligned properly, meaning that they are vertically centered within the navigation bar?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}
<body>
<nav>
<div class="container">
<div class="navigation" id="script-target">
<a href="index.html" class="logotype">
<img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
<p>Exception</p>
</a>
<div class="divider"></div>
Select
Select
Select
Select
<img src="img/icon.svg" alt="menu" height="26px">
</div>
</div>
</nav>
</body>
Update:
I changed the display properties and now all the navigation elements align properly. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
You can fix this by adding some padding to the bottom of the divider class:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
EDIT: Since you may want all the elements to align (not just the menu links) here is an updated fiddle with all elements aligned through margins and eliminating "inline":
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
EDIT 2: It seems like there may be a bug in fiddle or somewhere else because the horizontal distance between the menus is off by 1px - but the distance will change depending on how wide the viewport.
If you add "margin-right: -4px;" on the .item class it will leave 1px of space between 1 of the 4 and the gap will move as you resize your window:
https://jsfiddle.net/42j3e8jp/
If you add -5px the gap disappears (but there is most likely still a 1px difference):
https://jsfiddle.net/8udb4eqn/
To be honest, this is one of those problems that no one will ever notice unless you add red backgrounds to the a to really show the issue. Personally, I would either refactor your code to use the "traditional" menu setup that is used by libraries like Bootstrap:
https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Or, I would just forget about the 1px difference and move on as determining the issue could take much longer than refactoring the code. I've learned that there are a lot of little quirks in CSS/HTML (especially across browsers) so unless your 1px difference is noticeable it's usually not worth the effort.
I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/
It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }
try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com
I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}
I admit, I'm not that good at CSS. Must be my lack of design skills.
So I am trying to accomplish four small tasks.
Move the time box (i.e '01:04' and '12:13') so it floats to the right top edge of the image?
Move the description of the workout to display to the right of the image beneath the time box and the routineID?
Allow the bottom border of class 'routine' to always be right beneath the image just like it is to the top of the image.
keep class 'routine' the same size even if more text in description is added. I want every 'routine' to have the same width and height dimensions.
I have everything layed out here: http://jsfiddle.net/n2learning/xMsrN/
Sorry to be that annoying guy with four questions in one question. Any help is appreciated!
Here is an updated jsfiddle link: http://jsfiddle.net/n2learning/xMsrN/22/
Follow up questions and comments -
The 'workout description' is still jacked up. Trying to get this to display beneath the top row, which includes the 'time' and 'ID'. The top row will also (eventually) include small image symbols.
I just noticed that the image sizes are different. I tried modifying '.routineImage' to give it a width and height property, but doing that screwed things up. How/where do I standardize the size of each image? (the images are coming from youtube and other video sources)
<ul id="routinefilter">
<li class='routine' data-id="15">
<div class='routineImage'><img src=http://img.youtube.com/vi/UheCchftswc/2.jpg></div>
<div class="routineTimeID"> <!-- added wrapper to keep it a single row -->
<div class='routineID'>16</div>
<div class='routineTime'>01:04</div>
</div>
<div class='routineDesc'>Use lighter weights on a barbell due to higher counts</div>
</li>
</ul>
CSS
#routineframe {
height: 400px;
border: dashed;
font-family: Arial,helvetica,sans-serif;
cursor: pointer;
width: 60%;
overflow: auto;
}
#routinefilter {
list-style: none;
clear: both; /*keeps each <ul> seperate*/
}
.routine{
background: #F4F4F4;
color: #41383C;
font-size: 18px;
border:2px solid #666;
margin:5px;
padding:5px;
width: 95%;
overflow: hidden; /*allows this to contain the floats*/
}
.routine .routineImage{
position: relative;
float: left;
display: inline;
margin-left: auto;
margin-right: auto;
}
.routine .routineTime{
position: relative;
top: 0;
float: left; /*this was floated the wrong way*/
margin-left: auto;
margin-right: 3px;
border: 1px solid #666;
background: white;
color: navy;
}
.routineTimeID { /*class added to keep the description from being in between the two elements*/
width:140px;
float: left;
}
.routine .routineID{
top: 0;
float: right;
margin-left: auto;
margin-right: auto;
border: 1px solid #666;
background: white;
}
.routine .routineDesc{
top: 0;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
I tried to notate all the changes I made and why. I think i got all of them...
For the last question, though, you can't do this with CSS. As I understand it, you want the text size to automatically shrink if more text is added? That will have to be done with JavaScript, solution here
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
White space at bottom of anchor tag
Check out this sample page here..
http://denise.brixwork.com/
For some odd reason, under that pic of that family, there's a gap before the grey border (5px #333) div that contains the image. I removed all margins, paddings etc. and it still wont' disappear. :(
Short of setting a fixed height on the #index_content div, which i don't want in case the image has to be re-sized later (which means double the work for me), how can I remove that gap while leaving it elastic?
My HTML Code:
<div id="index_content_container">
<div id="index_content">
<img src="http://denise.brixwork.com/images/index_photo.jpg" alt="Real Whistler Living - Real Estate for the Next Generation" />
</div>
<div class="clear"></div>
</div>
The CSS:
/* INDEX PAGE SPECIAL CSS */
#index_content_container {
position: relative;
width: 970px;
border: 5px solid #e1bb14;
left: -20px;
display: block;
float: left;
padding: 0px;
margin: 0px;
}
#index_content {
position: relative;
width: 960px;
border: 5px solid #333;
float: left;
display: block;
padding: 0px;
margin: 0px;
}
#index_content img {
padding: 0px;
border: none;
margin: 0px;
clear: none;
}
Try this:
#index_content img{
padding: 0px;
border: none !important;
margin: 0px;
clear: none;
display: block;
}
You only need display: block in your img tag, nothing else =)
I'm trying to make the menu appear at the middle of 30px line but the problem is that I cannot move it from the top unless I use display: table-cell.
What is wrong here?
Style sheet file:
div.menu
{
width: 600;
height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
vertical-align: bottom
}
The menu code in my html file:
<div class="space"></div>
<div class="menu">
Home
Home
Home
Home
Home
</div>
<div class="space"></div>
line-height: 100px; set the height of your menu line. But keep enough space in horizontal dimension, otherwize you will get crazy view. Look forward to min-width, width or overflow-x rules.
div.menu
{
width: 600px;
/* Use line-height instead of height */
line-height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
}
div.menu a {
vertical-align: middle;
}
setting the line-height to the desired value fixes the issue but it is not a correct way to do it. It is just a hack. The correct way is to use vertical-align property (for all the anchors inside the menu div)
.menu a {
vertical-align: middle;
}
Check this fiddle. http://jsfiddle.net/sfz7d/
Tell me if it works for you.