First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
My first question so please go easy. I've been stumped on this for a day now and can't work out what the issue is. Essentially I have a div with an ID that i'm adding a background url too..image1 inside the main div. Essentially it's an image that swaps when I hover. I've gone right back to basics and tried this code in a fresh document and it works perfectly. However when I paste the same code in the file i'm trying to work on the image doesn't display. No idea what would be stopping it?
The div id is working. I styled an empty red box to test it out.
The path is correct. I even went as far as to paste the image into my root for the sake of simplicity. Still nothing.
Any help would be appreciated.
html:
<div id="main">
<h1> <!-- something something about us --> </h1>
<p>The Custom House clock struck one. Mr. Fogg observed that his watch was two hours too fast.
Two hours! Admitting that he was at this moment taking an express train, he could reach London and the Reform Club by a quarter before nine, p.m. His forehead slightly wrinkled.</p>
<div id="image1"> </div> <!-- This is the part i'm having trouble with-->
CSS (including all css for #main):
#main h1 {
text-align: center;
padding: 30px 0 0 0;
color: #4b4b4c;
}
#main {height: 685px;}
#main p {
padding: 20px 50px 0 50px;
width: 60%;
margin: 0 auto;
text-align: center;
font-size: 15px;
color: #868686;
}
/* rollover css images */
#image1 {
background: url(contextmap.jpg) no-repeat;
width: 400px;
height: 400px;
}
I haven't added the hover yet because I can't even get the initial image to display, yet everything worked fine in my sample using only this code.
If there's anything i've left out please let me know. Like I said this is my first time posing a question. Thankyou.
You may need to change the file path in your css.
Instead of:
url(contextmap.jpg)
Try:
url(../images/contextmap.jpg)
Images can be replaced for the name of the folder where the jpg is stored.
The URLS in the css are relative to the CSS file, not the HTML file that links it. this should work if you have the image and the CSS in the same folder (or in case of CSS inside a style tag in your HTML file, same folder as your HTML file).
I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.
http://jsfiddle.net/T2qHR/12/
I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream
I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.
Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.
If you see what I am doing wrong, please fill me in. I'm at a loss of code!
Many thanks for any help you might offer,
R
Use display: inline-block and text-align: center instead.
div.floatingPic { display: inline-block; padding: 12px; }
div.containerVid { border: 2px solid #99cc99;
background-color: #000000;
padding: 45px;
height: 890px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center; }
As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).
fiddle: http://jsfiddle.net/T2qHR/20/
I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.