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/
Related
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 is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
please,
which is better? benefits and disadvantages
Html Layouts
<header>
< nav>
< aside>
or
css layouts (divs with float)
thanks
It looks like you haven't understood the whole concept of building websites yet and I really recommend that you go through a good HTML tutorial first.
To answer your question:
You cannot compare HTML markup to "using divs with float".
The main purpose of HTML tags is to structure your site. If you don't use anything but elements it might work, but your text is unreadable and there are lots of disadvantages - for example that screen readers cannot understand the site or bad SEO.
You should always use the appropriate HTML tag and style it using CSS. One example: You might want to have a heading which is smaller than a subheading. Nevertheless you should still use for the main heading and style it using CSS h1 {font-size: 0.8em;}
Tags are often used as containers and are very useful as well. They complement your site structure.
HTML is used to structure the layout of the webpage, like the bones in our body and CSS is everything else covering those bones (skin, muscle, clothing, etc).
Example:
You want to create a login page.
HTML - creates the text field elements and the labels
CSS - sets the font style, text field shape and size, background color/image, submit button's color, corner roundness, etc.
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 opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a directory page that's pretty simple--a company logo floated to the left, a company title and description on the right. There are about 150 of these, dynamically generated with PHP/MySQL. I recently made the entire site responsive minus the directory page. Right now I'm using tables for the directory which works perfectly. Many of the listings' descriptions vary in length (and therefore height) and using a table allows for the logos to stay perfectly centered with regard to the content.
In an effort to make this page responsive, I've tried to remove the table and rely solely on divs for the directory listings. This has been HELL. Getting an image vertically centered with a variable height on the containing div doesn't seem possible.
I feel like using tables isn't a bad practice in this case, as my data is "tabular" in nature. Am I wrong to assume this, and if not, how can I make the listings table responsive? It's hard for me to fathom being able to do so without changing the HTML (to a div style layout rather than table). Any help would be much appreciated.
You can make divs act like tables, I tend to stay away from tables entirely unless I am asked to code an email blast.
These will be your friends:
display:table;
display:table-cell;
vertical-align:middle;
As long as the images remain inline elements (you have not stated them as display:block) they can be vertically aligned by verical-align:middle and that is out of your way.
I would assume a wrapper class and some child elements with display:inline-block or even table-cell as APAD1 suggest would do the trick, if you can provide some more info we can see it in more detail.
Having said that, your data semantically, imho, would be considered list items and not tabular data and the best way would be to markup-them as li elements.
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.