Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

help with layout please.

Featured Replies

I have a few questions which i have posted over in the CSS section but i keep getting given code which just confuses the hell out of me. m a designer so i need to know which buttons to click in order to make somehting work. code just fries my brain!

 

question 1.

i have set out my website in a basic structure with div tags. I have a header area, navigation bar, main content area and footer. i need the main content area to be a different size on each page depending on content (obviously) my question is, how do i make it a different size for each page. if i change the CSS rule it applies to every page.

 

question 2.

I am just wondering what is the best way to create this kind of layout in CSS? i currently have div tags of, header, navigation, content and footer. can i do it all within the content area or do i need to create lots more div tags?

it is only the structure of the main content area that i need to figure out.

 

example.jpg

 

i would really appreciate your help as this is driving me round the bend.

 

thanks

ok here is a basic layout done for you

 

index.html

<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
 <li>Home</li>
 <li>Services</li>
 <li>testimonials</li>
 <li>contact</li>
</ul>
</div>
<div class="content">
 <img here>
 <p class="right">text here </p>
 <hr>
</div>
<div class="content">
 <img here>
 <p class="right">text here </p>
 <hr>
</div>
<div class="content">
 <img here>
 <p class="right">text here </p>
 <hr>
</div>
<div class="content">
 <img here>
 <p class="right">text here </p>
 <hr>
</div>
</div>
</body></html>

style.css
[code] .content {
  width:900px;
  margin:auto;
}
.content img {
  float:left;
}
.right {
 float:right;
 text-align:left;
}
#wrapper {
width:1000px;
margin:auto;
}
#nav {
background-color:grey;
width:1000px;
}
#nav ul {
width:700px;
margin:auto;
list-style-type:none;
display:inline;
}

[/code]

 

that should display how you want your site, all you need to do is change text colours and add the content, and make the nav bars clickable

  • Author

like i said i really appreciate the help, but the code just destroys my brain! i need to know which buttons to press so i can do it for myself next time.

 

thanks again.

There are no buttons in Notepad++ mate

 

Don't use a WYSIWYG editor to do a website; you will just encounter a million and one problems.

 

Head over to HTML-Dog to learn all about the wonderful world of HTML/CSS or failing that, hire someone on this forum to build your site for you in the Looking to Hire section for a relatively low cost :)

  • Author

haha, minus 1! QUALITY.

 

sorry for wanting to learn how to do things rather than copy and paste some text.

i think a pretty high percentage of web designers (notice i said designers and not developers)use dreamweaver to design websites.

 

never mind though, thanks for your help.

the best way to learn is to use the code given

 

every decent web designer has looked through someone elses code to help them learn what does what

 

if you copy my code then just play with the code and work out whats controlling what

 

if you want to learn the code properly go to www.w3schools.com/html, www.w3schools.com/css

i think a pretty high percentage of web designers (notice i said designers and not developers)use dreamweaver to design websites.

 

I thought they were called cowboys? You should be able to hand code everything, not drag and drop, dream weavers design view outputs bad code ):

I thought they were called cowboys? You should be able to hand code everything, not drag and drop, dream weavers design view outputs bad code ):

 

my college tried telling me all designers use dreamweaver and i should get a copy. I stuck with notepad+ and would never use dw... My code is then clean and i haven't got to find the crap that dw inserts into it

 

any decent web developer shouldn't be using wysiwyg,

my college tried telling me all designers use dreamweaver and i should get a copy. I stuck with notepad+ and would never use dw... My code is then clean and i haven't got to find the crap that dw inserts into it

 

any decent web developer shouldn't be using wysiwyg,

 

Agree. Webdesign is not solely a visual thing. There's much more to web-design than just making it 'look' good on the screen. I've yet to see a WYSIWYG editor that actually is any good at generating good semantic code.

I wouldn't be surprised is most people did you dreamweaver - but that doesn't mean it's a good thing. People used to think the earth was flat.

To create a good professional website you will need to get down and dirty with codes to ensure it works as well as it should.

 

Remember that websites is being presented in a multitude of media - not just various browser versions, but on mobile devices, printed, read out loud by screen readers, accessed by search engines and other computer programs that harvest, collect and connect data. This is some of the few things you have to consider when designing web-sites and to make a good professional product WYSIWYG doesn't cut it.

 

I also use Notepad++, or PHPEdit. But I have looked at the recent DW and it's code-view mode does look useful. It provides some feedback and tried to catch potential code issues. So I wouldn't dismiss DW, just wouldn't use the WYSIWYG mode.

i think a pretty high percentage of web designers (notice i said designers and not developers)use dreamweaver to design websites.

 

This completely befuddles me, do you mean that people who use dreamweaver dont use code?

 

I like DW CS4 alot, but basically it's just notepad++ with an ftp file manager, and a nifty code navigator that lets me find the code i want across all the relevant files without scrolling.

 

I dont think that how something looks in DW (or any other WYSIWYG editor) is a very trustworthy representation of what you will get on the web either.

 

My first CSS book was the Missing Manual CSS it helped me alot.

I use Dreamweaver's code view like it was Notepad++ and then the design view to get a rough idea of how it's looking without having to keep previewing it in a browser every 5 seconds.

 

It's still a very useful program despite what people say ^_^

my college tried telling me all designers use dreamweaver and i should get a copy. I stuck with notepad+ and would never use dw... My code is then clean and i haven't got to find the crap that dw inserts into it

 

any decent web developer shouldn't be using wysiwyg,

 

 

Personally I used dreamweaver for a minute but didn't use the WYSIWYG part of it.. just the source code.

Overall I thought it was bloated and went to topstyle which kind of annoys the crap out of me. So once I get a mac again I will use either coda, textmate or something like that.

 

WYSIWYG just throw in too much random garbage code that's unnecessary to the outcome you achieve.

  • 3 weeks later...

... People used to think the earth was flat.

 

I cry fallacy, people never used to think the earth was flat. Common thought back then was that of it being pear shaped. 888

 

 

 

yes, I'm aware of how irrelevant that statement is but I’m posting it anyway. :pp

Hi,

I came across this link which might be helpful for web design. I mean it looks like designers rarely have time. It speaks of some different ways to design a web site very easily. What do you guys think of it? I am trying to use this right now, let's hope I succeed :)

 

http://www.raptivity.com/webexpert/

 

Hi,

I checked this out and found it pretty good. I would like to know though, what other web designers feel about it!!

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.