?
Solved

Need help styling a web page

Posted on 2016-08-06
5
Medium Priority
?
62 Views
Last Modified: 2016-08-13
HI,
I am attaching the html files for my web page. Initially when you open it it appears crooked but just select Rich Text or Markdown from drop down then it works fine.
If you select rich text the size of the editor appears fine. This is how exactly i want to style Markdown write and preview .I need some help with styling of the screen when you select the Markdown option.
There are two issues  :
1) On write page the textarea is resizeable. I want to fix the size of this text area and match exactly like the following screenshot always :
write.png
2) The preview area i appended an html inside the div and since it was large it just crossed over other elements and a scroll bar appeared. Same thing as in write case i want the height to limit it to just above the Add comment box.
And so a scrollbar appears inside the div rather than on the page.
preview.pngPlease help me pointing out changes i need to do to achieve this.

HTML folder :
Archive.zip

Thanks
0
Comment
Question by:Rohit Bajaj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41745477
First - remove the hardcoded width and height from the <textarea> for the #write
Then add these styles

#write textarea {
  width: 100%;
  height: 297px;
  resize: none;
}
.tabcontent {
  overflow: auto;
  height: 297px;
}

Open in new window

Note the hard coded height moved to the styles above - if you want to make the areas bigger then you need to change those.

The Preview pane was overflowing for two reasons

1. Not set height
2. overflow style not set to auto (create scroll bars)
0
 

Author Comment

by:Rohit Bajaj
ID: 41745720
Thanks that worked.
I need to figure out some more things on this page on of them is :
If you move the cursor to Write a pointer appears but that does not happen when you go to preview.
To me it looks like all css is same for both.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41745954
Spelling error
<a data-tab="preview" class="tablinks" herf="#">Preview</a>

Open in new window


herf instead of href
1
 

Author Comment

by:Rohit Bajaj
ID: 41749072
Hey,
I will need some more help on minor things. :
 Screen-Shot-2016-08-09-at-9.51.15-PM.pngHere you see a border is appearing inside drop down... How can i get rid of that ?
Thanks a lot.. If you feel its getting longer i can file another question...
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41749902
This appears to be a new question.

Please can you close this question and open another one to address this issue - you may reference this question in your new one.
0

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question