I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
Related
I have an svg img I got from thenounproject.com (don't worry, I have a place on my site where I give credit to the creators of the images) which I have inside a div. I have set the CSS of the div to have overflow: hidden; however the img is stickout out of the bottom, changing the height of the containing div above the div the svg img is contained it.
Here is the photo of the end result so far (the blue overlay is the <img> object being viewed with firebug so you can see how it is sticking out beyond the white div containing it)
the code I have is:
HTML
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/></div>
</div>
CSS
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
I'm trying to get it so that the "blueish" overlay in the photo, which represents the svg img, does not extend beyond the white box
UPDATE
Thank you all for your answers. I though I would update this to narrow down my question now that I have gotten your feedback. I've tried removed float: right; and the other ideas (remove the border: 0px solid transparent;) but, while helpful, they did not solve the problem.
I currently have transform: rotate(90deg); applied to .box.edit so that way at least the overflow is inline with the rest of the .dropdown bar.
I've tried max-height: 100% and width: 100%; height: auto; etc. but that does not solve my problem. I do not need the entire svg in the box, only what you can see in the photo above (the gear). The part below that has copyright bit from thenounproject.com (see my above statement, I am still following their rules on using photos).
I don't know if I will need to edit the svg file or what, but I was trying to use overflow: hidden; to cut off the end bit (so it does not affect my spacing).
Thank you for your assistance so far.
try this remove border
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
/*border: 1px solid transparent;*/
border-radius: 2px;
cursor: pointer;
}
Remove the float from .box and use display: inline-block instead
Hi he is working and now you can define your img css width and height 100% as like this
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
<div class="dropdown">
<div class="box edit"><img src="http://i.stack.imgur.com/8wc74.png"/></div>
</div>
So unless I am reading this wrong the height and width attribuite would work wouldn't it?
Code would be like this and then you would just adjust the height and width according to what you would need..
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/ height="42" width="42"></div>
</div>
As of now your image height is exceeding more than the height of its container due to which it is showing overlay going out of its container. Well applying max-height:100%; to image will make your image to stay within it's parent container, so give it a try.
I have finally found what the problem was with this:
Upon further research, I found that a <svg> has an attribute called "viewBox," which controls how much of the <svg> is shown. The <svg> I was using had a viewBox setting of "0 0 100 125," which basically means the width of the <svg> was 100 and the height 125. Upon finding this, and reducing the height to 100, the <svg> became a proper square and did not stick out further than it's containing div.
Thank you everyone for your answers, a lot of them were good and helpful.
i have a webpage and use the <hr> tag for separation of content when the page is displayed on tablets. it look like this:
at the red rectangle the line should continue. however, it does not. what do i have to change in html/css in order to let the <hr> continue until the border of the page?
the page is here: http://crossroads-festival.org/test2015/en/film/almaen
please note to redue the browser width to at least 811px for the horizontal line to show up.
thanks for your help!
UPDATE:
the css for <hr> is
hr {
height: 0;
border: none;
border-bottom: 1px solid #c1c1c1;
margin-bottom: 1.5em;
background: none;
}
the css for the divider-mobile class is:
.divider-mobile {
margin-top: 3.125em;
margin-bottom: 3.125em;
overflow: visible;
border: none;
color: #888888;
background-color: #888888;
height: 1px;
width: 150%;
margin-left: -25%;
}
in the html i use it like this:
<hr class="divider-mobile">
In your CSS you have:
#filmcontent {
overflow-x: hidden;
}
That is preventing the negative margin on your <hr> from going to the edge of the page.
You'll also want to remove the width: 150%; and margin-left: 25% on the <hr> and instead do...
margin-left: -20px;
margin-right: -20px;
(Where 20px is equal to the padding on #content .entry-content)
That will get you your desired effect!
I am trying to convert a three-column web-page layout from HTML tables to CSS, but there is one characteristic which I have so far been unable to replicate.
The HTML solution allows a photograph to be placed by php into a column to the right of the main text, but in the absence of a photograph, that column collapses, and the main text content extends up to a final right-hand 'spacing' column to maintain a right-hand margin.
So far, the only way I have found of achieving the three-column array in CSS is to use a container of fixed width, and to use fixed width styles for the div tags defining the columns, together with floats. The basis of the HTML code is:
<div class="container">
<div class="title_strip"><img src="headline_text.png"></div>
<div class="hdr_img_space"><img src="leaf_header.jpg"></div>
<div class="lh_col"><p align="center">ADMINISTRATION<br/>[WEBMASTER]</p></div>
<div class="main_content"><p>This is the location for the main administrative page
content, and will hopefully be able to contain all the necessary text, even if it
over-runs</p></div>
<div class="rh_image"><img class="rh" src="photo.jpg"></div>
<br style="clear: both"></div>
and the core CSS styling is:
body {
margin: 0px;
padding: 0px;
background-color: #200542;
}
p {color: #CCCCCC; font-family: arial, sans-serif; font-size: 14pt; line-height:1.4em
}
.container {
width: 1000px;
min-height: 600px;
max-height: 2200px;
margin: 8px auto 0 auto;
background: #333333;
padding: 0px;
}
.main_content {
float: left;
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
width: 516px;
padding-top: 20px;
background: #333333;
}
.lh_col {
float: left;
width: 200px;
min-height: 600px;
max-height: 2000px;
padding-top: 20px;
padding-left: 20px;
padding-right: 24px;
margin: 0;
background: #333333;
}
.rh_image {
width: 200px;
min-height: 620px;
max-height: 2000px;
float: right;
padding-top 20px;
padding-left: 20px;
padding-right: 20px;
background: #333333;
}
img {
display: block;
}
.rh {
margin-top: 40px;
}
Because the columns are fixed width, the removal of the image tag leaves a wide gap to the right of the main text, and none of the suggestions I have found in web searches shows a satisfactory solution - generally the collapse of the right-hand column leaves the text layout in the centre column unchanged, despite the apparent availability of more space.
I want to avoid solutions which would give problems with browser compatibility - is there any way of achieving what I want in CSS, or shall I have to persist with the now deprecated use of the HTML table tag?
Peter N.
If I understand correctly, what you need is if there is no image in the right column, your main content should be without "gap", or complete layout should look like 2-column page, if so try this:
first thing is to move your
<div class="rh_image"> before
<div class="main_content">
next just adjust css like this:
.main_content {
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
padding-top: 20px;
background: #333333;
}
it should do the trick
Sorry I just saw your fiddle
here's the link with the complete code: http://jsfiddle.net/darkosss/3deMj/
I made a CSS Navbar, but inbetween each "navbar-item", there is little space. I don't want there to be anyspace at all! Is there a way to make this happen without changing the margin-left for every navbar-item?
<!doctype html>
<html>
<head>
<title>Home - UnhandyFir9</title>
<style>
#wrapper {
box-shadow: 0px 0px 20px 10px black;
left: 0px;
top: 0px;
margin: auto;
margin-top: 30px;
width: 800px;
background-color: rgb(200, 200, 200);
font-family: sans-serif;
}
#top-notification {
display: inline-block;
width: 100%;
height: 20px;
background-color: lightblue;
text-align: center;
}
#navbar-core {
width: 100%;
height: 30px;
background-color: lightgreen;
}
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
</div>
</body>
</html>
The problem is in display:inline-block - it reduces the elements to inline blocks, meaning they behave like all other inline content in HTML. Since there's whitespace between the anchor elements, which as always collapses to a single whitespace, what you see is an actual 'space' in between in the current font size just like between words in a sentence. You can fix this by applying font-size:0 on the container but that's messy since you'd have to reset it for the children. Recommended method is to just use float:left instead and manually set the parent's size correctly, and set the items to height:100%.
Using multiple elements with the same ID is wrong but not causing this issue - should still be fixed though.
As I mentioned in my comment, IDs must be unique, so use classes instead. That being said, your links are inline elements and are sensitive to white space, so either float them left or remove the white space between the elements in the code.
Ex:
.navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
float:left;
}
jsFiddle example
White space removed jsFiddle example
Try this;
.navbar-item {
display:block;
float:left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
First,
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
Change this to a class instead of an id. Id's are unique and can only be used once on a page but a class can be used over and over again.
I am pretty sure the space is from this but I will make a fiddle to test,
display: inline-block;
You could change display: inline-block; to float: left; and have it without the space.
JSFIDDLE
Use float: left; instead of display: inline-block; by using inline-block will have 4px margin by default but using float: left; by default do not have the space. And use classes for every a element no id, id are unique and shouldn't be repeated.
.navbar-item {
/*display: inline-block;*/
float: left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
If you still want to use inline-block instead of float: left; you should use margin-left: -4px;
To solve your problem quickly, you can wrap your links with span and give it a darker background:
<div id="navbar-core">
<span class="navbar-inner-wrapper">
Home
Lessons
About Us
Donate
</span>
</div>
Then add this to your CSS:
.navbar-inner-wrapper {
background-color: green;
}
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