Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm a beginner web developer that has learnt all the basics in html and css. Currently, I've been introduced to the concept of frameworks to sort of ease the placement of elements in a web page.
In regards to this, I am still confused as to how do you implement them into your code. Whenever I download one, I get a bunch of files and don't know what to do with them. I'm surprised there aren't too many explanations online as to how to use them, maybe I'm looking in the wrong places.
Secondly, is there a beginner friendly framework I should start with? I've seen people suggest 960 Grid System.
In addition, what makes a framework "light"? What is the difference and what purpose does a "light framework serve?
I know you must be a bit lost, like we are now on other subjects.
Go to this link:
This is the code of 960 Grid System
You have to copy the whole content of the link.
In your current web, you are going to have a main HTML file (probably index.html or like that). In the same folder where your main HTML file or index is, create a folder called CSS and inside this one, create a file called for example grid960.css. Now, open it, copy all the content of the link and paste it in your grid960.css file. Save it, and in your main HTML file, you have to call it to make it work. For that, in your HTML head section, copy this:
<link rel="stylesheet" href="css/grid960.css">
Now you can use it. And you have to know that the best way to use it is applying its classes with divs. To explain some of the classes grid960.css has, I am going to give you an example:
<div class="container_16"> <!--The other option is container_12.-->
<div class="grid_8">
This div is going to occupy half part of the window.
<div>
<div class="grid_4">
This div is going to occupy a quarter of the window.
<div>
<div class="grid_4">
This div is going to occupy a quarter of the window.
<div>
</div>
You can also do this:
<div class="container_12">
<div class="grid_12">
This div is going to occupy the whole window. Next grid you put is going to be below it because is not going to fit.
<div>
<div class="prefix_2 grid_8 suffix_2">
This div is going to occupy the whole window too, but with a margin-left (prefix_2) with the same width of a div of class grid_2, and the same for the margin-right (suffix_2)
<div>
</div>
Of course, you can do combinations:
<div class="container_16">
<div class="preffix_1 grid_7 suffix_8">
</div>
<div class="preffix_6 grid_10">
</div>
</div>
And whatever you want. Try it. It is very easy. I hope I have helped you.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I am creating a simple art profile for fun, I have a banner and a navbar. I tried to put in text:
Welcome to my art profile. This profile contains all my artworks from the previous years.
But this wont show on my page.
I checked the padding of my instructio nand navbar, bot of them should not be in the way. These are the only 2 things added to the code. I simply want the text to appear on the page.
Alright, first off, add your code between 3 backticks (`). I looked at what I saw when you can edit an answer, and this is the code I saw:
<div id="main-content">
<div>
<h>Welcome to my art profile. This profile contains all my artworks from the previous years.</h>
</div>
</div>
Second, <h> is not a tag. You are probably looking for <h1>, <h2>..., <h6>.
This is your improved code:
<div id="main-content">
<div>
<h1>Welcome to my art profile. This profile contains all my artworks from the previous years.</h1>
</div>
</div>
Next, since you said there isn’t a lot that’s affecting your HTML, just post all the code. There is an “id” called “main-content”, which leads to believe some part of your code is causing the text not to show.
This website also isn’t for editing simple code mistakes, which, I will admit, is subjective.
You need to read this: https://stackoverflow.com/help/how-to-ask
EDIT: Format your CSS you added in your comment. It’s difficult to make it out. I don’t have enough reputation to edit, or make comments.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I’m trying to make it so that the pages of my book can fit into 2 specific column sizes for all the text such that I can click through the pages. Is there any way I can automate it so it detects where exactly in the page it needs to stop and move onto the next?
Ella, your question is very vague. I would suggest as #paulsm4 suggested you study up on html, css and javascript.
Your question does not explain where you are getting the text from, and how it is rendered to the screen. I am going to try and help.
Let's assume you are adding text to a div, your "book" has two pages and so let's assume each page is a div. One on the left and one on the right.
I am going to assume we can use the flex layout so let's use a flexbox.
The css would look something like this.
.book {
display: flex;
}
.page {
flex: 1;
padding: 10px; //just because
border: solid; //so you can see the page
}
The html would be:
<div class="book">
<div id="page1" class="page"></div>
<div id="page1" class="page"></div>
</div>
You could use css to make the min-height of the book 100% so that it spans the entire page. I have added an ID to each of the pages so that you can use javascript to find out how big the div block is.
The javascript would be something like this,
var width = document.getElementById('page1').offsetWidth;
var height = document.getElementById('page2').offsetHeight;
Now with simple maths width x height we have the area. But now we have a problem. What is the font size and type of font you are using. If you have a fixed width font then this is easy if you have a variable width font, then you may have a problem. But in essence, using the size of a letter you could workout by taking the area of the div divided by the area of a letter and you will know how many letters and punctuation can fit in the div.
Alternatively, and a little more complex, but an approach I would use, would be to add words to the div, until the div is larger than a predetermined height. When this happens, remove the previous word and add words to the next div. This can be done using javascript. I would suggest instead of pure javascript that you use a framework such as react, or angular.
Your question however lacks loads of information. In future, please provide some source code to show what you have done, how you are fetching the words and how you are rendering them.
I suggest you take a Udemy course and learn a little more about html, javascript and css. See here.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am trying to find a way to replace a DIV that has a few other divs inside with another div that also has a few other divs inside. Tried to do it with a few different programs: Atom, Sublime, Visual Studio Code, PhpStorm but it didn't work.
It could probably be done using regex since the first div starts with <div class="short-form"> and ends with
...id="submitbtn_intakeFormShortAutofillSubmit"/>
</form>
</div>
</div>
but my problem is probably the number of tabs, spaces and newlines.
Just to mention, I don't have to make this active on a webpage, but inside hundreds of html pages on my hard drive, so if you can recommend some free software that can do it, it's also good.
Yep, this is very possible! Here's how you do it:
<div class="short-form"[\s\S]*id="submitbtn_intakeFormShortAutofillSubmit"\/>\s*<\/form>\s*<\/div>\s*<\/div>
Break it down!
<div class="short-form" match anything that starts with <div class="short-form"
[\s\S]* matech 0 or more of anything that is white space or is not whitespase (So bassically match anything)
id="submitbtn_intakeFormShortAutofillSubmit"\/> match anything that matches id="submitbtn_intakeFormShortAutofillSubmit"/>
\s* match 0 or more whitespace
repeate the last two a few times!
Here's an example on regexr!
You can use the regex
<div class="short-form">[\s\S]*?id="submitbtn_intakeFormShortAutofillSubmit"\/>\s*<\/form>\s*<\/div>\s*<\/div>
see it live
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Here is my website:
maitxhomes.com/main.html
It looks great (I hope) on desktop browsers, but when I pull it up on my phone, the blue section's content is just in a big column that extends all the way down, and the same thing happens with my footer's content. I'm not sure if this has something to do with the <ul> in my HTML code, or the CSS? Is there a #media query I can add to address this?
In order to design layout responsive on various devices like mobile-phones, tablets, desktops etc. you link bootstrap file to your website acordingly i.e if you want your website for desktops you use ".col-md" or "col-lg" class.
but if you want to display your website correctly on small devices like mobile phone... you should add 'col-xs' class.
for ex:
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4">content 1</div>
<div calss="col-xs-9 col-sm-8">Main content</div>
</div>
</div>
I think, this should solve the issue you are facing.
for more info:
go through the following link
Bootstrap Grid Options
Remove the rule on .container that sets the width. Also remove the rule from tri-section that sets a height.
Remove from line 3:
.container {
width: 960px
}
And line 189:
.tri-section {
height: 130px;
}
By writing explicit height and width values, you are making those element non-responsive.
Just to add a little bit to my answers, I've addressed your specific problems, but you should really consider developing websites with a mobile first approach if you at all expect users to interact with your site from a non-desktop sized screen.
You are likely going to run into more issues taking a desktop first approach.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
If I have a psd and trying to figure out what is the best diminsions to use for the html conversion what would be best. Just do the psd image size?
I have my site and the page to what my image should look like below.
Website: http://kansasoutlawwrestling.com
Mockup jpg: http://kansasoutlawwrestling.com/assets/images/wrestling.jpg
I went to psd2htmlconverter.com paid 3 bucks and got something but the html and css shows correctly but its not separated like it should be.
http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html
But I'm really trying to work off of the main website css.
Not entirely sure what you're asking, but if you're talking about how to slice the PSD, I wouldn't slice everything at set dimensions. Let the layout dictate where to slice, and try to slice it logically by section, in such a way that reassembling it with HTML/CSS is easy.
Start by mentally diving the layout into sections, e.g. top banner, left column, right column, content area, footer, etc. After sectioning the layout, just start slicing it logically into small or medium sized images.
It might help to create a skeleton in HTML/CSS so you have an idea of how you need to slice the template. This tends to work out well because you're not just slicing it randomly, but rather you're slicing it to fit the skeleton that you created. Obviously, you may need to slice a big image like a top banner into a few parts, but that doesn't really change anything - you're still fitting the sections of the template to the sections of your skeleton.
Here's something I put together really quickly, just to illustrate how to go about slicing the image. I wouldn't use my exact example, but it should point you in the right direction:
That's probably the best advice I can give with the provided information. I'll expand on my answer if you provide more details.
EDIT
Looking at the source on your page, it looks like you just need to float div#middle so the right sidebar doesn't drop below it.
CSS table layouts are really good for this kind of stuff. Give something like this a shot:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
}
#layout {
display:table-row;
}
#left-sidebar, #right-sidebar, #content {
text-align:left;
display:table-cell;
}
</style>
<div id="container">
<div id="layout">
<div id="left-sidebar">
<!-- left sidebar-->
</div>
<div id="content">
<!-- content -->
</div>
<div id="right-sidebar">
<!-- right sidebar -->
</div>
</div>
</div>
Here are some articles discussing table-based layouts in CSS2:
http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
http://thinkvitamin.com/design/tables-the-next-evolution-in-css-layout/